SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout floats problem

    How can I get the red box in the code below to display to the right of the first blue box, without putting the first two boxes in a separate div, if possible?

    Code:
    <div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;">
    </div>
    
    <div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">
    </div>
    
    <div id="box3"  style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: red;">
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Presumably you aren't allowed to change the source order of the boxes? Moving the red box to the middle would do the trick, of course.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could absolute position all three of them, thats not that hard

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the only way would be if you knew the height of the box. using AP or RP... or even margin-top:-200px;

    unfortunately negative margin values for top /bottom are still calculated based on the WIDTH and NOT THE HEIGHT of the parent so that nixes using margin-top:-50%

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I missed out part of the code, the 3rd div is higher than the others so switching the order would not work immediately unless I apply a margin-top:-140px on #box2.

    What is preferable, to apply this negative margin-top on #box2 or apply absolute positioning on #box3 (together with a margin-left) to get it into place? Both give the same result visually.

    So options

    Updated code:
    Code:
    <div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;">
    </div>
    
    <div id="box3"  style="float: left; margin-right: 10px; height: 350px; width: 200px; background-color: red;">
    </div>
    
    <div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">
    </div>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Whether you use negative margins or absolute positioning the potential is that you will create an overlap somewhere along the line unless what comes next isn't controlled explicitly.

    In your example you could just remove the red box from the flow and then it will line up as you wanted.

    A negative bottom margin equal to its height will do:

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="box1" style="float: left; margin-right: 10px; height: 200px; width: 200px; background-color: blue;"> 1</div>
    <div id="box3"  style="float: left;margin-bottom:-350px; height: 350px; width: 200px; background-color: red;"> 3</div>
    <div id="box2"  style="float: left; margin-right: 10px; clear: left; height: 200px; width: 200px; background-color: blue;">2 </div>
    </body>
    </html>
    It all depends on the real dynamics of the site and why you are tying yourself to the structure you have given above. You could just absolutely place each element but of course you lose the flow of the document and you don't get an automatic effect.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if I wanted to keep the order of the boxes, box 1 then box2 then box3, as it makes more sense like that in the HTML?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As already mentioned you could use negative margins but it wouldnt be an automatic method.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="box1" style="float: left; height: 200px; width: 200px; background-color: blue;"> 1</div>
    <div id="box2" style="float: left; clear:left;margin-right: 10px;  height: 200px; width: 200px; background-color: blue;">2 </div>
    <div id="box3" style="float: left; margin-top:-200px;height: 350px; width: 200px; background-color: red;"> 3</div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •