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