Left column isn't same height as right column when data is added

**bayridge** · 07-06-2016, 09:18 PM

1) Script Title: CSS Liquid Layout #2.1- (Fixed-Fluid)

2) Script URL (on DD): bayridgemarket.com/testhgt.php

3) Describe problem: Would like heights to stay the same on BOTH columns. If right is longer, left should be the same height even if not enough data. Same goes for left. It should stay the same as the right.

You can see what I mean in URL in number 2. Don't really care about right column so much as background is going to be white anyway, but need left to stay same height as right. Thanks. Been going crazy trying to get this to work as I'm pretty much new to css.

**ddadmin** · 07-06-2016, 10:04 PM

This is normal, and one of the limitations of a "float" based layout- the column heights do not sync up. There are various hacks and JavaScript solutions to this, which you may want to do a search on Google for.

A more elegant, future proof solution is to use CSS flex box if you don't care about IE 10 and below support. The following uses Flexbox to create a two column layout whereby the heights of the column are always the same:

Code:

<!doctype html>

<style>

div.flexcontainer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 100vh; /* set min container height to viewport height */
}

div.columns{
	padding: 10px;
  box-sizing: border-box; /* make padding part of width declared, not in addition */
}

div.columns:nth-of-type(1){
	background: #eee;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 250px;
	        flex: 0 0 250px; /* make this flex item 250px wide and non flexing */
}


</style>

<body>

<div class="flexcontainer">

	<div class="columns">This is column 1</div>
	<div class="columns">This is column 2</div>

</div>

</body>

**bayridge** · 07-07-2016, 02:48 AM

Where would I go to learn about them?

Is there a way to limit the max width to 900px in column 2? in example I gave I have a header and don't want text to go past right of header image. Thanks.

**Beverleyh** · 07-07-2016, 07:24 AM

Where would I go to learn about them?

Other methods of equal height columns/divs? A Google search on "equal height div" brings up loads.

If you want to learn about flexbox, there loads of tutorials online too - CSS Tricks has a Complete Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And there's a cute froggy game here that helps you learn by moving the frogs around the screen: http://flexboxfroggy.com/ (great fun)

Is there a way to limit the max width to 900px in column 2?

For a max-width on columns 2... The max-width: 960px; property:value pairing is your friend. But, this will have the effect of aligning the content to the left of the screen, so you might want to apply justify-content: center; to div.flexcontainer to float them both centrally. Again, Flexbox Froggy can help you visualise the effects of various flexbox properties, so work through the stages of the 'game' to understand more.

**bayridge** · 07-07-2016, 02:00 PM

Thanks for your help. I had a feeling when I found this site, it was going to be a fav of mine. I seem to recall something similar many years ago but then it was just all kinds of menus. I don't even think it had a forum. Is this the same one?

I'm just getting into CSS and am doing a couple of new sites in php and MySQL. I do my scripts mostly in Notepad++. I hope I won't be a pest. Would donate if you have donate page. Thanks again.