Re: How do I line up these three rows of objects?


<midori0x@xxxxxxxxx> wrote in message
news:0348e011-754b-49b3-beed-0ec7501d5c9f@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
On Nov 6, 6:42 pm, "rf" <r...@xxxxxxxxxxx> wrote:
<midor...@xxxxxxxxx> wrote in message

news:c10536a6-5330-4cee-8e42-619db9f38acb@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Also there's a new naughty bug it seems, just when everything was
going okay and
I could get some work in I noticed if I add enough text the the image
descriptions to
break to a new line I get either a really large bottom gap. I
reproduced the error so you
could see.http://www.cpart.co.cc/calendars/8x12/index.html

That is to be expected. It also happens when I increase my font size so I
can read your white on black text (which is quite hard for me to read,
expecially with serifs).

Fragile design.

So what's causing this,

It's quite simple but totally unobvious. You have to understand exactly what
float: left means in this situation.

It's all explained in sectino 9.5.1 of the CSS reccomendation, particularly
rule 2:

"If the current box is left-floating, and there are any left-floating boxes
generated by elements earlier in the source document, then for each such
earlier box, either the left outer edge of the current box must be to the
right of the right outer edge of the earlier box, or its top must be lower
than the bottom of the earlier box."


Consider how those floated left containers (your class=select divs) are
layed out.

The first one (the slightly longer one) is easy as there are no prior
floated boxes, just float it left to the border of its container.

The second one is almost as easy, just float it left until it hits container
1.

Similarly for three and four.

Now, container 5 does not fit to the right of container 4 so the second part
of rule 2 comes into effect, its top must be below the earlier box,
container 4.So, drop it down to just below container 4.

But, it still needs to be floated left so it is, it is slid left until it
hits something, namely the right side of container 1 (which is protuding
down below 2, 3 and 4). It doesn't hit containers 2 and 3 because it is
already below their bottoms (refer again to the rule above). It doesn't
slide over to the left side of the outer container (as you might wish it
would) because, as per the above rule, it must be to the right of the prior
box (container 1) *before* we consider if it must be below that box
(container 1).

We proceed with containers 6 and 7 which go where you see them. Then
container 8, it can't fit to the right of 7 so it gets dropped down below
the bottom of 7, and then slid left until it hits something, the edge of its
container.

Temporarily switch borders on for those <div class=select>s (using firebug
perhaps) and you will see exactly what is happening.

Bottom line: If you wish to use this technique to lay out a rectangular grid
of things then you must make absolutely sure that each one of them is the
same height. this generally means images only, no text. You can't ensure
that somebody might not up their font size and cause a line wrap. I suppose
you could use white-space: nowrap to ensure no line wraps but then you are
faced with text that may escape out the right hand side of those containers.

If it were me I would simply put the whole lot in a table (probably a CSS
one) and be done with it. While this could be labled as "abusing tables for
layout" we *know* it will work, whereas we *know* your method will fail
under certain conditions (font size, amount of text). Fiddling with left
floated divs just doesn't work in your case.

and while I'd consider changing the color I
think she was aiming
for white on the greyish black. What color text do you think might
contrast better on that
dark grey?

My preference is very dark black on white.


.

Relevant Pages

  • Re: Making a homemade brass sorter
    ... # sorters using something that would stack better. ... of three of the flaps bent horizontally, and three more of the flaps ... "flaps" through the bottom of the container by laying a chunk of wood ... good and toasty, and melt the verticals through the bottom, rather than ...
    (rec.guns)
  • Re: Anyone Here dUsing One Of These?
    ... this time is on a minor grade. ... Although the container doesn't have ... and skirt the bottom. ... The top beam and the bottom beam cannot ...
    (rec.woodworking)
  • Re: Large scale permaculture
    ... As far as the CO2 tank, I would think you would need a *very* slooow ... or dry ice from the bottom, ... having disturbed the container. ... O2 absorbers right before sealing. ...
    (rec.gardens.edible)
  • Re: A Chemistry Problem
    ... The two gasses are thoroughly mixed together and then left to separate (heavier xenon at the bottom, ... About how long will it take for the gas at the bottom of the container to be at least 75 percent xenon atoms? ... The density of each gas at equilibrium will be exponential with respect to altitude due to gravity. ...
    (rec.puzzles)
  • Drinkable Water!
    ... It can be in a larger container (black, ... You can put contaminated water or plant life in the container for ... distillation into pure drinking water! ... container, at the bottom. ...
    (soc.culture.african.american)