CODEWITHSUNDEEP
csshtmlcss-float
Johnny_D
Johnny_D

Reputation: 4652

floated div inside another floated div problem

I have problem with floating divs.

Current html markup:

<div>
    <div style="float: left;">
        1
        <div style="float: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;" />
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;" />
</div>

Block 2 appears in browsers as a part of Block 1, under Block 3 and 4. What's the problem?

Upvotes: 1

Views: 968

Answers (2)

user859989
user859989

Reputation:

divs are not self-closed tags (such as <br /> and <hr /> and <img />), and closing them in your way, will not close them really!!! In fact your code should look like this:

<div>
    <div style="float: left;">
        1
        <div style="float: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;"></div>
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;"></div>
</div>

Upvotes: 2

hdz200
hdz200

Reputation: 355

Try closing the div after block 4 this way:

<div style="clear: both;"></div>

Upvotes: 0

Related Questions