tags:

views:

221

answers:

2

Hello guys,

I can't put this to work like it should, I'm not that good with CSS, I need you help!

I have a page like this:

<html>
<head><title>title</title></head>
<body>
<div id="page">
    <div id="container">
        <div id="head"><img src="..." alt="..." /></div>
        <div id="content">
            <div id="menu"><ul><li>...</li></ul></div>
            <div id="content_body">stuff here</div>
        </div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>

OK. My container div have a background color, I want that, as long as my text inside the content_body div expand, the background of the container div would expand too, but it is keeping a fixied height (it's just expanding the logo image height), and my text in the menu and content_body div is out of the background.

My CSS:

body
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    background-color: #333333;
    background-image: url(Images/bg.png);
    background-repeat: repeat-x;
    color: #000000;
    margin: 0px;
}
input 
{
    font-family: Tahoma, Verdana, Arial, Times New Roman;
    font-weight: bold;
}
h2
{
    text-decoration: underline;
    font-style: italic;
}
#page
{
    width: 100%;
}
#container
{
    overflow: visible;
    width: 780px;
    border: solid 6px #FFFFFF;
    background-color: #DCDCCD;
    margin: 0 auto;
    margin-top: 15px;
}
#content
{
    clear: both;
}
#menu
{
    width: 240px;
    display: block;
    float: left;
}
#content_body
{
    width: 500px;
    display: block;
    float: right;
}

What I'm doing wrong?

+3  A: 

Try

#content
{
    ...
    overflow: auto;
}

Edit: Also make sure to add a width as DA points out in the comment below.

blu
yep, but be sure to give it a width as well. Overflow: auto + a width will force it to clear all divs within.(please vote to delete the answer I left. I posted it as an answer rather than comment)
DA
+2  A: 

Everything in your #content div is floated, and well, floated elements don't really take up any space. Essentially since they are floated they are being taken outside of the regular stream of content and breaking the rules to be able to be pushed to the left or the right.

In order to get the div containing the floated elements to size with its content you could give is display: inline-block and maybe width: 100% so that it takes up the whole area...

#content{ display: inline-block, width: 100%; }

Giving it a display of inline-block makes everything outside of it think it is an inline-level element, but everything inside it is treated like it is a block-level element, and it ends up giving height to anything inside it that might be floated without having to give it a set height.

Sir David of Lee
Oh! Really thankz, for the answer and the explanation, now a lot of things makes sense! Thank you man! And sorry people if it was a doctype question, I'll be there next time!
Alaor
IE 6 and 7 and Firefox 2 don't like inline-block all the time. Check out this blog post: http://blog.flobro.com/inline-block-for-everybody/
rpflo