Re: Why can I not make it work right?

In article <q1m5041df42e8nvhf43vridm4bo9ujh9j4 (AT) 4ax (DOT) com>,
richard <i.do.not (AT) ca (DOT) re> wrote:

Ok so like what the sam hell is the trick here to get a division to
float where I want it to?
When I display it in FF, "name" and "label" appear on two seperate
lines.with a float:left for "label".

Using the same example dorayme gave, it worked just fine.
I go to add in other css elements and it won't float. No how no way.
So what am I not doing right?


.bigbox { width:500px; height:200px;...}
.row1 {text-align:center;...}
.row2a {width:20%;}
.row2b { float:left; width:30%;}

div class="bigbox"
<div class="row1">Artist</div
<div class="row2a">Name</div
<div class="row2b">Label</div
/div

In a thread called "Back to basics on divisions" on this ng yesterday or
so, I gave you some code and replied to you about some difficulties you
had then when you found your variations not working. Without knowing, at
that stage, what changes you had made. You changed the thread and the
dummy content (why either?) and here we are back.

The reason for your difficulty in the above is that the first child div,
'row1' is not an inline element, it is a block and plonks itself down as
a box while the browser then asks, "OK, what's on the next line?"
The answer is, a floated div. So that is where it goes - on the next
line - and jammed up to the left as is its nature.

If you put the float where I put it in the code - on the first child
'row2a' - you have a div that is taken out of the flow. Here was my css
(I adapt to your changed text):

div {border: 1px solid; text-align: center;}
..bigbox {width: 40em;}
..row2a {float:left; width:50%;}

The following div (row2b) now thinks "Hey, here I go" as it looks at the
*very same line* the float is on. The float is out of the flow and so
the line has a notice on it, as it were: "the line is still free, so if
you following elements want a place in this flow, just plonk yourself
right here on this line providing you can fit"

Now, in my code, I gave no instructions about width for this second
child. It was simply the default 100% width. Well, there is plenty of
room for the div on the line for its 100% width because the float is out
of the flow, it sits on top of this div!

It is a tricky matter, I agree, to understand some basic things about
flow, floats and block elements. None of it is at all intuitive or
commonsensical. Even the "providing you can fit" hides a multitude of
issues.

[There are some very interesting issues that emerge if you give the
second child in my code a width that is less than 56% which anyone is
welcome to raise with me.]

--
dorayme