Jump to content

left div disrupting center div


niche
 Share

Recommended Posts

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 by niche
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...