CODEWITHSUNDEEP
csshtmlheightcss-float
lindhe
lindhe

Reputation: 889

Parent div's height setting interferes with child div's float

I have some troubble with a web page I'm making...

I have a div that contains all elements on the page (or rather all elements between the header and the footer of the page, but that's irrelevant). The height of the body div changes due to the content it's holding. The wrapper holds one div with id="content" that is supposed to hold whatever content I want displayed on the page, one div I use as a button (id="collapse") and one div (id="calendar") that creates a field that will hold a list of events comming up.

CSS:

#body {
    height:500px;
    min-height:250px;
    width:100%;
    background:#fc0;
    padding-bottom:100%;
    margin-bottom:-100%;
}
#calendar {
    float:right;
    height:100%;
    width:20%;
    border-left:10px solid #678DC0;
    background:#b0c4de;
    padding-bottom:100%;
    margin-bottom:-100%;
}
#collapse {
    float:right;
    margin-top:10px;
    text-align:left;
    padding-left:10px;
    padding-top:20px;
    padding-bottom:20px;
    background:#678DC0;
    border-top-left-radius:25px;
    -moz-border-top-left-radius:25px; /* Firefox 3.6 and earlier */
    border-bottom-left-radius:25px;
    -moz-border-bottom-left-radius:25px;
}
#content {
    height:auto;
    width:100%;
    background:#b0c4de;
    text-align:center;
    padding:50px;
}

HTML:

<div id="body">
<div id="calendar"></div>
<div id="collapse">>></div>
<div id="content"></div>
</div>

Now this is my problem: If I set #body height:auto; the float of the #collapse div and the width of the #content div acts wierd. #collapse div floats all the way to the edge of the #body div instead of stopping when it floats into the #calendar div. Same thing with the #content div. It stretches till the #body edge, not till the #calendar.

Hope I've given you a proper formulation. Any questions of what I'm asking for?

Any ideas?

Upvotes: 1

Views: 623

Answers (1)

Paul Graffam
Paul Graffam

Reputation: 2149

As Ryan commented you can use the clear style to properly position your floated elements. I set up a test page here: http://jsbin.com/apinuj/2/edit#html,live, demonstrating how to use the clear fix on your html so that the body div is properly aligned when set to height: auto.

Upvotes: 1

Related Questions