Vertically center divs in grid (no table)

Design help General
1

Hi,

I was wondering if someone came across the problem of vertically centering divs (height = unknown) in a two column (responsive) grid - see attachment.

Is something like this possible in Webflow and if so, how would you approach this since the use of tables is not available in Webflow at this point?

–Alex

2

Hello @olexalex!

Here is some work around :wink:

1269×810 62.5 KB

Hope it helps,
Anna

1 Like
3

Thank you! Your solution works and I can use this workaround for prototype purposes.

I guess it’s not possible to accomplish the same results without JS when the height of the elements (orange, blue) is unknown.

–Alex

4

Always welcome :smiley:

About JavaScript version better to ask @bartekkustra :wink: He is our JavaScript ninja :smiley:

1 Like
5

Well, Bart will be avaliable later, he said that he’ll try to do that today’s evening (in 3-4h) and will post video + explanation here

1 Like
6

Hello,

Sorry it took so long. A lot has happened today :) First of all let me please build a nice base of your task.

1920×976 210 KB

As you can see on the image I have created a 2-col layout with different size of columns. Our goal is to make the shorter column elements appear in the middle of the column.

Let’s start by selecting each column and in Settings assign unique ID:

Once we’ve got this we can go on with setting up classes properly. We need to give our row a class (in my case it’s awesome-row ;)

240×517 996 KB

As you can see I gave a combo class to our col element and called it vertical. It contains only info that the object will be pushed down 50% of parent container height and then up 50% of its own height. Neat trick! You probably realise that it doesn’t work yet - that’s the reason I removed the class from object; I’m saving it for next steps :)

I’ve removed the class vertical from our object so I can clearly see what’s going on. We will use it in the code soon.

Be careful! If `.vertical` is not assigned anywhere it will clean itself on CleanUp function in Styles!

Now all what’s left is some JS code :)

<script>
	function crazyColumns() {
		var lcolOnLoad = parseInt($('#left-col').height());
		var rcolOnLoad = parseInt($('#right-col').height());

		if(lcolOnLoad >= rcolOnLoad) {
			$('#left-col').removeClass('vertical');
			$('#right-col').addClass('vertical');
			$('#left-col').parent().css('height', lcolOnLoad);
		} else {
			$('#right-col').removeClass('vertical');
			$('#left-col').addClass('vertical');
			$('#right-col').parent().css('height', rcolOnLoad);
		}
	}

	$(document).ready(function() {
		crazyColumns();

		$(window).resize(function() {
			crazyColumns();
		});
	});
</script>

That should do the trick. PM me if you have any troubles :slight_smile:

7

Hi Bart.

First off, thank you very much for your detailed support! I finally had a chance to continue working on this part of the project where I need to finalize the vertical centering.

I followed your instructions and everything works fine! However, for some reason there is a strange problem. When you publish the site and resize your browser, in the first row (only) the image covers most parts of the text in the left column… Not sure what the problem is, because the columns underneath don’t have this bug… If it is a bug? Also, when you resize the site in preview mode, the problem does not occur.

Maybe you can take a quick look at it if you get a chance.

https://preview.webflow.com/preview/sandbox-alex?preview=3d92f872f4b1a18d22ba877782d847ed

Thank you.
Alex

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.