Whenever I nest my div tags within another div element in an HTML document

Question

Whenever I try to position a div inside another div using float, I encounter problems.

<div id="main">
    <div id="anotherDiv">
        <h1>Test</h1>
    </div>
</div>

Here is the corresponding style sheet:

#main{ background-color:red; padding:20px; }
#anotherDiv{ background-color:blue; }

This is how my page looks like without using float property:

And this is what happens when I add the following style:

#anotherDiv{ float:left; }

However, I would like to achieve something like this:

What should I do in this case?

Answer 1

Answer №1

To achieve the desired outcome for the parent div, simply include overflow:auto in the CSS rule for #main:

#main {
    background-color:red;
    padding:20px;
    overflow:auto;
}

For a live demonstration, you can view this jsFiddle example.

This approach will successfully restore the behavior of the parent div without requiring any additional HTML elements.

Answer 2

To achieve the desired outcome for the parent div, simply include overflow:auto in the CSS rule for #main:

#main {
    background-color:red;
    padding:20px;
    overflow:auto;
}

For a live demonstration, you can view this jsFiddle example.

This approach will successfully restore the behavior of the parent div without requiring any additional HTML elements.

Answer 3

To fix the layout, you must clear the float.
Below is a working example:

#main{ background-color:red; padding:20px; }
#anotherDiv{ background-color:blue; }
#anotherDiv{ float:left; }

<div id="main">
    <div id="anotherDiv>
        <h1>Test</h1>
    </div>
    <div style="clear: both;"></div>
</div>

Answer 4

To fix the layout, you must clear the float.
Below is a working example:

#main{ background-color:red; padding:20px; }
#anotherDiv{ background-color:blue; }
#anotherDiv{ float:left; }

<div id="main">
    <div id="anotherDiv>
        <h1>Test</h1>
    </div>
    <div style="clear: both;"></div>
</div>

Answer 5

Another option is to experiment with the display: inline-block; property.

Answer 6

Another option is to experiment with the display: inline-block; property.