CODEWITHSUNDEEP
csscss-float
Echo says Reinstate Monica
Echo says Reinstate Monica

Reputation: 3937

How to get container to expand to contain float with

I am trying to float a menu div to the left of the content div. The menu div comes after the content div in the html. The content div is given a left-margin so it appears to be next to the menu on the right. That is so the order will be content div then menu div when it isn't styled by media queries.

The problem I am having is that the floated menu div is going outside of its container and going over the content at the end of the page. I have already tried clearing the float, which does nothing in this case. Also, setting the overflow on the container does not help because then there is a scroll bar which I do not want.

Anyone have any ideas of how to solve this? Maybe some other way to go about this? All I need is to have the menu div come after the content div, have the content div take up the rest of the width available and a way to style it so the menu is to the left of the content for IE8+ and all recent major web browsers.

Here is an example of the problem (http://jsfiddle.net/m9zG8/):

<div>
    some top content
</div>
<div id="container">
    <div id="content">
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div id="menu">
        <a href="">serveral</a><br/>
        <a href="">links</a><br/>
        stuff<br/>
        this<br/>
        is<br/>
        long<br/>
        long<br/>
        long<br/>
        long<br/>
        long<br/>
     </div>
     <div style="clear:left"></div>
</div>
<div style="clear:left"></div>
<div>
    some bottom stuff<br/>
    this is being cut off by the floating menu.
</div>

#container {
    position: relative;
}
#content {
    background-color: blue;
    margin-left: 6em;
}
#menu {
    background-color: green;
    width: 5em;
    float: left;
    position: absolute;
    top: 0;
}

Note: the background color is just there to make it easier to see.

Upvotes: 0

Views: 213

Answers (1)

andi
andi

Reputation: 6522

I think you need to float the menu instead of having it positioned absolute. Putting the width in % will make sure that the menu width plus the content width can add up to 100%. (you can also add in padding or margin of a few % by making the width a little smaller.) http://jsfiddle.net/m9zG8/2/

#content {
    background-color: blue;
    width:85%;
    float:right;
}
#menu {
    background-color: green;
    width: 15%;
    float: left;
}

Upvotes: 2

Related Questions