Problems with Divs: Float Properties Options

[nathanjohns]

Hi everybody,

On this webpage I have created DIVs; a sidebar, top banner, header with navbar, main content area, and a footer.

The sidebar should be "floated" to the left of everything else by containing the top banner, header, main, and footer into a single "container" DIV

i.e...

<div class="lsidebar">
...
</div>


<div class="container">

<div align="center" class="banner">
...
</div>

<div class="header">
...
</div>

<div class="main">
...
</div>

<div class="footer" align="center">
...
</div>

</div> (this last end div tag ending the container)

Now, my CSS for all these DIVs is as such:



.banner {
margin:auto;
width:100%;
height:120px;
background:#03F;
padding: 0;
}

.header {
margin:auto;
width:100%;
max-width:1080px;
background:#FFF;
padding: 0;
line-height:1;
font:Georgia;
}

.footer {
font: 100%/1.4 Arial, Helvetica, sans-serif;
width:1080px;
background: white url(footer.jpg) no-repeat top left;
padding-top:70px;
margin:auto;
}

.container {
width:1080px;
background:#FFF;
margin: 0 auto;
}

.main {
padding-left:180px;
font: 100%/1.4 Arial, Helvetica, sans-serif;
width:720px;
background: white url(background.jpg) no-repeat top left;
}

.lsidebar {
float:left;
width:180px;
height:100%;
background:#0FF;
}




AND this works... If the browser window is stretched to be pretty large, however it the window is shrunk such that the "container" comes up riiiight next to the sidebar (as in 0 px space between them) and then continues to be shrunk from that point on, the MAIN and FOOTER DIVS will go underneath the sidebar, though the BANNER and HEADER will not.

I might be worth adding that I've tried many combinations of width, margin, position, and float properties for each DIV class...cannot figure out the suitable combination to accomplish the container (everything but the lsidebar) to always to be the right of the lsidebar


I cannot figure for the life of me why this is happening... Thanks in advanced the help is appreciated.

- Nathan

This post has been edited by nathanjohns: May 23 2012, 01:57 PM

[pandy]

Actually, copy the content-less markup you just posted and view it in a browser, with the CSS of course. It so happens it illustrates the problem pretty well.

It's like this. A float doesn't push adjacent boxes away, it just pushes their content away. In reality #container stretches all the way to the left but behind the float. You can see that by adding background colors and see to it that #container is higher then the float so you can see how far it really goes. In the case of your sample code above you can see that the dark blue background of #container goes all the way out to the left, except in the top left corner it's covered by the little float.

To handle this you add either a left margin or a left padding to #container, depending on what you want to accomplish. Both of them need to be at least as wide as the float. Margin will probably work for you. What you will see as a visible margin between the two boxes is the the margin you use minus the width of the float, provided the result isn't a negative number. If the float is, say, 250 px wide and you want a visible margin of 30px, then you need to use a left margin of 280px.