Floating a div tag to the right.

  • Can anyone tell me why my nested div tag appears outside its parent div tag whenever I apply a float property to the nested tag in my CSS? Thanks so much foe any help.

    Here’s the XHTML 1.0 code:

    <body>
    <div class=”container”>
    <h2>On the road – San Francisco </h2>
    <h6>Thursday, April 20, 2006</h6>
    <div class=”post”>All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy. All work and no play makes Jack a dull boy.

    </div>
    <div id=”photos”>
    Blardi blar blar.
    </div>
    </div>
    </body>

    and the CSS:

    * {
    font:Georgia, “Times New Roman”, Times, serif;
    background-color:#B3F9E5;
    }

    .right {
    float:right;
    }

    .left {
    float:left;
    }

    .container {
    margin: 20px auto;
    width: 760px;
    padding: 1px 0;
    border: 1px solid #000000;
    }

    .photos {
    float: right;
    }

    h2 {
    color:#000000;
    padding: 0 0 0 10px;
    }

    h6 {
    color: #222222;
    padding: 0 0 0 10px;
    }

    .post {
    font-size: 14px;
    padding: 0 10px 10px 10px;
    width: 500px;
    }

Viewing 1 replies (of 1 total)

  • First, your page code above is a little off; should be:

    <div class="photos">

    Second, you need to clear the float, usually done through another div following right after the float div. Something like:

    <div class="photos">
    Blardi blar blar.
    </div>
    <div class="clear"></div>

    Then in your css:

    .clear {
    clear: right;
    }

    The property can be added to an id or class following the float div normally. Other clear options are clear: left; and clear: both;

    Reference:
    https://css.maxdesign.com.au/floatutorial/clear.htm

    By the way, this was one of the purest css inquiries I’ve seen on the forums. ;)

Viewing 1 replies (of 1 total)
  • The topic ‘Floating a div tag to the right.’ is closed to new replies.