The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problems with Divs: Float Properties
nathanjohns
post May 23 2012, 01:54 PM
Post #1





Group: Members
Posts: 2
Joined: 23-May 12
Member No.: 17,154



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 23 2012, 07:19 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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. happy.gif

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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd July 2014 - 02:57 PM