CSS Positioning Question????

[theo]

Please,

Why is this wide 6px border showing up where it is. It's supposed to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index specified, or something. HELP???

http://wholives.com/temp/cssr.htm
Thanks,
me

[mscir]

theo wrote:

Please,
Why is this wide 6px border showing up where it is. It's supposed to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index specified, or something. HELP???
http://wholives.com/temp/cssr.htm
Thanks,
me

I believe Floated divs aren't considered part of the normal flow, clear
forces them to be included in the flow.

http://www.w3.org/TR/REC-CSS2/visuren.html#q28

..clear{
clear: both;
}

<div class='clear'></div>

Add an empty clear div after the barright and contentright divs.

A way to diagonse this for yourself would be to wrap all 3 "bar..."
divs in a #bar div, set the border: 1px solid red; and see where the red
border shows up with and without the clear div placed after the barright
div. Do the same thing with the "content..." divs, you'll see right the
difference right away.

Mike

[theo]

> I believe Floated divs aren't considered part of the normal flow, clear

forces them to be included in the flow.

Mike,
You're right. I had to put the base div to float left also, like the rest
of them, to keep it going. It's not left, obviously, cause it's set at full
width of the page, but had to float left to keep the logic flowing.

Thanks,
Mike

[Gus Richter]

mscir wrote:

theo wrote:

Please,
Why is this wide 6px border showing up where it is. It's supposed
to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index specified, or something. HELP???
http://wholives.com/temp/cssr.htm
Thanks,
me

I believe Floated divs aren't considered part of the normal flow, clear
forces them to be included in the flow.

My explanation based on my understanding of float/clear:

Sice everything is floated except for the heavy bordered "base" box, the
floated boxes are out of the normal flow and the "base" box (in flow)
tries to flow to the side of the floated items but finds no space for
itself, so it wraps down to the next available space for it (and centers
its content there as instructed).

The thing is that the "base" box encompasses the full area from the top
and left of the floated item(s), down to its own bottom and the full
width of the viewport (less any margin), explaining why the thick border
applies to the whole area and not only for the "base" contents.

Applying a clear:left; to "base" will cause it to clear all the left
floated boxes by no longer being tied to the floated boxes in trying to
flow to the side of the floated boxes but to go seek space for itself
immediately below the lowest floated box. It does so (with its contents
centered) and its box no longer includes the floated boxes.

--
Gus

[Gus Richter]

theo wrote:

I believe Floated divs aren't considered part of the normal flow, clear
forces them to be included in the flow.

Mike,
You're right. I had to put the base div to float left also, like the rest
of them, to keep it going. It's not left, obviously, cause it's set at full
width of the page, but had to float left to keep the logic flowing.

Thanks,
Mike

That is not the right thing to do in my opinion.
Simply add clear:left; to #base ia all.
You may wish to try also adding margin:0 30%; or something like it to
alter the thick border's left and right.

Looking at the overall structure of the page, I would have approached
the whole thing differently, by floating the left column "left", the
right column "right" and permitting the center item to flow down the
middle. Then I would have applied clear:both; for #base in order to
clear both columns.

--
Gus

[theo]

"Gus Richter" <gu********@netscape.net> wrote in message
news:Aa********************@golden.net...

mscir wrote:

theo wrote:

Please,
Why is this wide 6px border showing up where it is. It's supposed
to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index specified, or something. HELP???
http://wholives.com/temp/cssr.htm
Thanks,
me

I believe Floated divs aren't considered part of the normal flow, clear
forces them to be included in the flow.

My explanation based on my understanding of float/clear:

Sice everything is floated except for the heavy bordered "base" box, the
floated boxes are out of the normal flow and the "base" box (in flow)
tries to flow to the side of the floated items but finds no space for
itself, so it wraps down to the next available space for it (and centers
its content there as instructed).

The thing is that the "base" box encompasses the full area from the top
and left of the floated item(s), down to its own bottom and the full
width of the viewport (less any margin), explaining why the thick border
applies to the whole area and not only for the "base" contents.

Applying a clear:left; to "base" will cause it to clear all the left
floated boxes by no longer being tied to the floated boxes in trying to
flow to the side of the floated boxes but to go seek space for itself
immediately below the lowest floated box. It does so (with its contents
centered) and its box no longer includes the floated boxes.

--
Gus

Gus,
Thanks, I was wondering about that one. All of those float lefts throw
things off center, slightly, so I had to keep going with the float. All of
those divs, is the float necessary to keep them positioned, in rows of
three, or is there another option? I don't know, I'm just going from what
I've seen elsewhere.
Thanks,
me

[theo]

Applying a clear:left; to "base" will cause it to clear all the left

Cheers,
I applied the clear:left. It does seem centered, fairly. I'm not sure
why the three div rows will only take 99% total width, and not 100%. There
are no left or right margins or padding.
http://wholives.com/temp/cssr.htm

Thanks,
me

[Gus Richter]

theo wrote:

Applying a clear:left; to "base" will cause it to clear all the left

Cheers,
I applied the clear:left. It does seem centered, fairly. I'm not sure
why the three div rows will only take 99% total width, and not 100%. There
are no left or right margins or padding.
http://wholives.com/temp/cssr.htm

Thanks,
me

Browser apply a default value for margin and padding. For example, Gecko
uses margin and Opera uses padding. I believe that they also use
different values (whatever they are). It is good practice to use
margin:0; border:0; on body or to specifically set a desired value
which then is used by the browsers.

--
Gus