left div disrupting center div

[niche]

My left div is disrupting my center div and I don't know why. If I give my left div a height, it leaves my center div alone. Why is that? http://www.lincolnsr...aded_120620.php Ideally. I'd like my left div to be as high as my center div, but I have to get past this issue first.

Edited June 21, 2012 by niche

[dsonesuk]

Any block element will merge with the floated element when placed below the floated element, clear: both; will prevent merging so it will stack below the floated element, that is what the spacer elements with clear: both are doing.

[niche]

I added clear:both; and removed the height, in the left div, and nothing happened. Then, I added overflow:hidden; to center div and I got much more of what I need except now there's a white column between my image and my center div, that I can't identify with firebug. This link displays what I need except the image needs to be almost touching the center div. http://www.lincolnsr...aded_120620.php How should I be using clear:both; based on this link to make my left div almost touch my center div?

Edited June 21, 2012 by niche

[niche]

Turns out changing the center div from margin:0 auto; to float:left; cleared the problem I was having. Though, I'm still fuzzy about clear. Please restate the reason for clear: or suggest a link that describes the problem issue because I want to understand.

Edited June 21, 2012 by niche

[dsonesuk]

A element using clear: both; as used by your site with the spacer, would prevent itself from moving up and merging with the left floated element, instead it will sit below the bottom edge of the left element, and all remaining elements will stack below it. example.

<div id="wrapper"><div id="left"></div><div class="content_block"></div><div class="spacer one"></div><div class="content_block"></div><div class="spacer two"></div><div class="content_block"></div><div class="spacer three"></div></div>

#wrapper {width:960px; min-height: 400px;}#left {float:left; width:200px; min-height: 400px; background-color:#FFCC33; opacity: 0.5;}.content_block {margin-left: 210px;  min-height: 100px; background-color:#CCFF00;}.spacer {height:10px; background-color:#993333;}.one {clear:both;}.two {clear:both;}.three {clear:both;}

Using firebug disable clear:both sequentially for class 'one' to 'three', as you do so, it and the element below, BUT! not the spacer element still with clear:both enabled, will move up to merge themselves with the left side panel. This is what you was originally experiencing.