html - troubles with divs

Question

It's me again with divs :(. I can't understand this... There is parent-block:

#content
{
position: relative;
width: 92%;
margin: 0 auto;
height: 100%;
min-height: 500px;
border: 1px solid red;
}

And I need in 2 blocks in it:

#news
{
position: relative;
float: left;
min-height: 400px;
width: 290px;
height: 100%;
}
#text
{
position: relative;
float: left;
margin-left: 20px;
min-height: 400px;
width: 625px;
height: 100%;
}

        <div id="content">
            <div id="news">
                ...
            </div>
            <div id="text">
                ...
            </div>
        </div>

But 2nd text block isn't in one line with news. And, after resizing news and text block, content block should resize too, but it doesn't... Why? Here is link to see all this: link text

Answer 1

You may need to add:

  display:inline;

to the divs.

Also, double check that there is enough space in the parent div. Each browser calculates this differently. That is, for the two divs to appear side by side there must be enough space to account for their widths and margins etc.

Answer 2

It's because both the divs inside #content are floated, taking them out of the normal document flow. On #content, change height: 100%; to overflow: hidden; - this should make it accomodate the floated elements inside it.