Question

<style>

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    background: gold;
}
div.content {
    background: yellow;
    border: 1px solid  purple;
    height: 150px;
}

</style>

            <div id='float'>
                Float text. 
            </div>
            <div class='content'>
                Content text. 
            </div>
            <div class='content'>
                Content text. 
            </div>

can anyone explain how the 2nd div content is on the newline ? while the 1st div is inline with div#float?

Answer 1

By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that’s where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.

There are lots of ways to control this, but I’m not sure what you’re after.