html - troubles with divs

There is parent-block:

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

And I ne开发者_如何转开发ed 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?

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.

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.