CSS 3 Panel Liquid layout content spacing

1k Views Asked by At

I have a great working 3 panel liquid layout but I just noticed that a problem with it.

When there is a div with a float:left and another div below with clear:both, all the divs below the cleared div get pushed all the way down to the height of the right column. Sorry is a huge space between Section 1 and Section 2.

You can see the code here. jsfiddle.net/QbSsb/

Is there a workout to this or a 3 panel liquid layout?

Thanks in advance, Susan

2

There are 2 best solutions below

0
On BEST ANSWER

the simple answer is instead of clear: both; just use clear: left; that's why they have clear left, right and both

0
On

Use this one for your clear separator

<div style="clear:inherit; padding:20px 0px;"></div>