Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Place two divs next to each other using float: left

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #252183
    tirengarfio
    Participant

    I have these two divs:

    <div style="width:400px;height: 400px;background-color: blue;float: left">my first div</div>
    <div style="width:600px;height: 400px;background-color: green">my second div</div>
    

    http://codepen.io/tirengarfio/pen/evZWbL

    As you can see, I have floated the first one.
    The problem: I expected the second to be placed on the right of the first one, but no..

    Since having two paragraphs this way,

    <p style="float: left">my first paragraph</p>
    
    <p>my second paragraph</p>
    

    the second paragraph is on the right of the first one, why it is not working in the same way for the div’s?

    NOTE: I know I can use other methods to put the divs next to each other. For example adding float: left to the second div, but what I really want to know is why is not working just adding float: left to the first one as with paragraphs or &lt;li&gt;‘s happens.

    #252552
    Shikkediel
    Participant

    What’s the issue exactly? Looks fine to me.

    #252575
    bearhead
    Participant

    I think the OP wants to know why paragraphs behave differently than divs when floated.

    The answer is that is just how the spec is written… paragraphs and divs are two different elements with different behaviors. In general, paragraphs tend to be more restrictive than divs – for example a paragraph cannot contain block-level elements while a div can.

    You can check the W3C spec itself for a more in-depth answer.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.