On the way to a perfect floating layout

Managing rendering of floating DIVs

[waldemar]

I'm trying to work out a floating layout with a flexible number of divs; I guess one or the other came across this problem, too - couldn't find any hints though. I hope I can make myself understandable in the following explanation:

I have several DIVisions (actually up to 10 FIELDSETs with different numbers of checkbox entries, but having about the same height +/- 1px) that I like to fill the window with in a dynamic way: Wide screen users may have 5 divs next to each other before the next row starts while a 640x480 user may only see two divs per row.

Now in theory this works with floats ("float: right;" in my case, since I have a navigation div to the left), which also brings the advantage of these "boxes" having the minimum width. But I'm still troubled about the rendering:

- The last-one-in-a-row + 1 div (the one that doesn't fit into the row anymore) starts in a "virtual" next row -being the only one there and having an x-position similar the last-one-in-the-row. Other than that this row is completely empty - after that div the next *real* row seems to be rendered. What seems to be the problem?

-### Row 1
-#-- <<<!
#### Row 2
-### Row 3

- Is there a way to justify these floating divs? "float: right;" seems to align them to the right. A wrapper-div "text-align: justify;" didn't help. I assume this is not possible?

[drbrain]

Are the widths on all these floats exactly the same? It could be that a rounding error prevents the floated elements from lining up properly...

Could you post a small, concise example that illustrates the exact problem you're seeing?

[waldemar]

No, they are all different widths...
Let's try some more ASCII-art :-). Illustration (with for example 17 divs - each # is a div) with full window width:

--##### 1
---#### 2
--##### 3
----### 4

smaller width:

--#### 1
--#--- ("hanging" float)
--#### 2
--#### 3
--#--- ("hanging" float)
---### 4

while I'm expecting:

--#### 1
--#### 2
--#### 3
--#### 4
-----# 5

What kind of rounding errors were you mentioning? (Known bugs?)
I'm thinking of the question "How does the browser decide when to start a new line?"

I even get very funky floatings like:

--### 1
--### 2
--### 3
--### 4
--### 5
--#-- ("Hanging") <-- both elements definitly fit in one *real* row
--#-- ("Hanging") <-/

[drbrain]

Floating point errors occur due to the way that computers handle non-integer numbers. sqrt(5)**2!= 5, because the computer cannot represent the number 'squart root of 5' exactly. The way to work around this is to make sure you widths don't add up to 100%:

.foo { float: right; width: 49% }

<div>
<div class="foo">hi</div>
<div class="foo">there</div>
</div>

Some browsers are better at handling floating point errors than others, so program conservatively.

The way float positioning is done is: "If there isn't enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it." CSS2 Section 9.5 [w3.org].

If you could make a simple example (like the one I have above) of your problem, that would help in building a workaround.

[waldemar]

Interesting... (more like a Spock's 'fascinating...' :-)

<div class="content">
<fieldset ...>
<legend>...</legend>
<input type="checkbox" name="pn10" id="pn10" value="..."><label ...>...</label> [sometimes here is a <br> to make the divs about the same height]
<input type="checkbox" name="pn11" id="pn11" value="..."><label ...>...</label>
<input type="checkbox" name="pn12" id="pn12" value="..."><label ...>...</label>
</fieldset>
[more fieldsets]
</div>

while

.content { margin-left: 250px;} (because of sidebar-navigation)
fieldset { padding: 10px; float:right; margin:5px; }

That's it. Just add more and more of those fieldsets (tried it earlier with regular DIVs) and play around with the browser window's width; the n+1 div is jumping around like crazy.

[Birdman]

>>[sometimes here is a <br> to make the divs about the same height]

I think that's your problem. You need to set the height of the floated elements explicitly if you want them to line up like 'ducks in a row'. :)

[waldemar]

Cheers, dr; that helped!
Experimenting with those <br>s it looks like the x-positioning in that new "virtual" row depends on the amount of space the <br> cuts off that line. But that is obviously a bug? The browser (1) checks the "unformatted" total width of the division, then (2) renders the floats and after that (3) makes the inner line breaks in the division...?

Anyway, I cut out all the <br>s and added some height:100px to the style, the boxes look kind of fine now. But the missing <br>s bring a new problem:

+--------------+ +----------------------------------------------+
¦O laaabel1 . . . ¦ ¦ O label1 O label2 O label3 O label4 O label5 . . . ¦
¦O label2 O laa .¦ +----------------------------------------------+
¦aaabel3 . . . . .¦
+--------------+

should of course look like

+----------------+ +------------------------+
¦O laaabel1 O laa.¦ ¦O laaabel1 O label2 O la . ¦
¦bel2 O laabel3 . .¦ ¦ bel3 O label4 O label5 . . ¦
+----------------+ +------------------------+

The browser doesn't even think of breaking a line until it really needs to (at the end of the line). Is there anyway to "suggest" a "soft" return other than <br>?

[thebrax]

this is very similar to what i was banging on about yesterday in my thread

ive ended up with

.row {margin:0 0 0 0;
padding:0 0 0 0;
width:100%;}

.column
{
margin:0 0 0 0;
padding:5px 2px 5px 2px;
width:100px;
float:left;
height:50px;
border-top:1px dotted #333366;
border-right:1px dotted #333366;
background:#f5f5f5;
}

in the css and...

<div class="row">
<div class="column">
Date-Id
</div>

<div class="column">
Requester
</div>

etc.......

</div>

hope this helps...

the key is definitely making your heights absolute in the divs that are behaving like tds...unfortunately this obviously restricts the amount of content you can put in before the page breaks...

i wonder if there is a kind of min...max method you could use...so that you never get a break...it always stretches the heights of your divs equally...