SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float leaves empty space

    Any idea how to get this to work?

    <html>
    <head>
    </head>
    <body>
    What I have:
    <div style="width:200px; height:400px;">
    <div style="background-color: red; width: 100px; height: 100px; float: left;"></div>
    <div style="background-color: green; width: 100px; height: 200px; float: left;"></div>
    <div style="background-color: blue; width: 100px; height: 100px; float: left;"></div>
    </div>
    What I want:
    <table cellspacing="0">
    <tr height="100">
    <td style="background-color: red; width: 100px;" />
    <td style="background-color: green; width: 100px" rowspan="2" />
    </tr>
    <tr height="100"
    <td style="background-color: blue; width: 100px" />
    </tr>
    </table>
    </body>
    </html>

    I'm going for X elements floated, and they will just fit together, leaving no space if they are all the same width. But the layout engines don't raise the third div into the open spot. The table shows what I'm trying to achieve.

    Really sorry if it's been answered before... searching for 'div', 'float', or 'layout' turned up many, many unrelated questions.

    Thanks ahead of time!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi ilsadir. Welcome to SitePoint.

    Probably the easiest way is to wrap the blue and red divs in another div:

    Code:
    <div style="float:left; width:100px;">
    <div style="background-color: red; height: 100px;"></div>
    <div style="background-color: blue; height: 100px;"></div>
    </div>
    <div style="background-color: green; width: 100px; height: 200px; float: left;"></div>
    Of course, it's better not to have all those inline styles in the final form.

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the inline styles are just for the 'repro case'.

    Wrapping the two small blocks works when I know there are 3 divs, 2 of which should be stacked on top of each other.

    But I don't want to have to order the divs to make it work. If I were making a static page where I could do that, I could just use the table, right?

    I'm really going for 'general case solution'. Thanks though!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's not clear (to me at least) what possible configurations you might need to be covered. A similar topic to this came up recently, with other solutions:

    http://www.sitepoint.com/forums/css-...em-752052.html

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

    It can't be done for variable height elements and even in a table you'd need to cater for it explicitly as required.

    If the heights are set and you never nest two larger items on the same side it can appear to work but is not a fullproof solution.

    Code:
    <div style="width:200px;">
        <div style="background-color: red; width: 100px; height: 100px; float: left;clear:left"></div>
        <div style="background-color: green; width: 100px; height: 200px; float: right;clear:right"></div>
        <div style="background-color: blue; width: 100px; height: 100px; float: left;clear:left"></div>
        <div style="background-color: orange; width: 100px; height: 100px; float: right;clear:right"></div>
        <div style="background-color: red; width: 100px; height: 200px; float: left;clear:left"></div>
        <div style="background-color: green; width: 100px; height: 100px; float: right;clear:right"></div>
        <div style="background-color: blue; width: 100px; height: 100px; float: left;clear:left"></div>
        <div style="background-color: orange; width: 100px; height: 100px; float: right;clear:right"></div>
    </div>
    You just float one right and one left and clear right and left appropriately.

    It's not a real solution though.

    The only way to have two columns is to start with two colums and then stack in each column as required.


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
  •