views:

54

answers:

3

I am bad at integration its crasy. I float a lot of my stuff and find that whenever I start floating something I have to float its container ans its containers container ad nauseum because otherwise the container is collapsed.

So looking at my site now its pretty nice a stable but if I put a border on body I see that it is 1px high on top and everything in body is outside. If I float body then everything looks good but:

1- Is that bad design and how should I do it?

2- If its ok how do I center body? I use margin: auto. But once body is floated it stops working.

This is my css.

    body {
    width: 960px;
    font-size: 13px;
    margin: auto;
    margin-top: 20px;
    border: 1px #000 solid;
}

.wrapper {
    float: left;
    width: 960px;

}

.header {
    float: left;
    width: 960px;
    border: 1px #000 solid;
    margin-bottom: 20px;
}

.menu {
    width: 960px;
    float: left;
    border: 1px #000 solid;
}

.sidebar {
    width: 260px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

.content {
     border: 1px #000 solid;
   margin-left: 20px;
    margin-top: 20px;
    width: 620px;
    float: left;
    padding: 10px;
}

.footer {
    border: 1px #000 solid;
    width: 960px;
    float: left;
    margin-top: 20px;
}

And the layout file:

<body> 
        <div class="wrapper"> 
            <div class="header"> 
                <h1>HEADER</h1> 
            </div> 
            <div class="menu"> 
                <ul> 
                    <li><a href="/">Home</a></li> 
                </ul> 
            </div> 
            <div class="sidebar"> 
                sidebar
            </div> 
            <div class="content"> 
                    <h1>Content</h1> 
            </div> 
            <div class="footer"> 
                 <h1>FOOTER</h1> 
            </div> 
        </div> 
    </body> 

Anyways hope I am clear.

+1  A: 

If you set your container's overflow to auto or hidden you shouldn't have to float it too (unless you want to for other reasons). Such as:

<div id="container">
   <div id="left">Content! this should be floated left</div>
</div>

#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }

Should have the container display with the border around everything.

swilliams
It does'nt work. Weird... I'll post the css and layout file.
Iznogood
+2  A: 

Replace the float with overflow: auto in .wrapper and it should work just fine. You can then center it with margin: auto:

.wrapper {
    overflow: auto;
    margin: auto;
    width: 960px;
}

Also, remove width: 960px and margin: auto from body as you don't need them anymore.

BoltClock
!! Ah it works now!! I was overflowing body after your first comments. I am all out of votes but I wont forget to come back and give you a point.
Iznogood
Hey, I'm out of votes too :P
BoltClock
voted just to make sure the right answer gets a vote :P
Litso
@Litso: thanks lol
BoltClock
@BoltJock Voted too as I said I would :)
Iznogood
A: 

Yes, floating all the elements like that is bad design and an abuse of the float element. It would be well worth your while to learn the natural flow of the elements and proper use of CSS position.

Rob
Frankly if I am lucky we'll find an integrator (do you say that in english?) and be done with css. :-)Would you say its bad design after the fix from BoltClock?
Iznogood