Float leaves empty space

HTML & CSS
1

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

Hi ilsadir. Welcome to SitePoint. :slight_smile:

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

<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

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

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:

5

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.


<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.