By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,773 Members | 1,838 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,773 IT Pros & Developers. It's quick & easy.

CSS Positioning Question????

P: n/a
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
Jul 21 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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
Jul 21 '05 #2

P: n/a
> 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
Jul 21 '05 #3

P: n/a
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
Jul 21 '05 #4

P: n/a
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
Jul 21 '05 #5

P: n/a

"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
Jul 21 '05 #6

P: n/a

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
Jul 21 '05 #7

P: n/a
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
Jul 21 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.