'clear' inside of nested divs

J

Jens Lenge

Hello world,

Somehow, webdesign using CSS turns out to be a reliable source of horror...
:eek:)

I have a basic three-column design with a content div in the middle. Now
when the content itself uses nested interior CSS formatting such as floating
elements, I run into the problem that 'clear' styles seem to also refer to
the outer floating columns instead of only the lements inside the parent
div.

I have put an example to http://www.photoss.de/test/test.html

How can I achive the last paragraph to be below the floating black rect, but
NOT below the red and blue columns?

Cheers, Jens

BTW: Any idea why my examle does not render ok on IE6 while it does on
Firefox? I have created the example it from a more complex page that uses
the same formatting and does render ok on IE6...
 
E

Els

Jens said:
Hello world,

Somehow, webdesign using CSS turns out to be a reliable
source of horror...
:eek:)

I have a basic three-column design with a content div in
the middle. Now when the content itself uses nested
interior CSS formatting such as floating elements, I run
into the problem that 'clear' styles seem to also refer to
the outer floating columns instead of only the lements
inside the parent div.

I have put an example to
http://www.photoss.de/test/test.html

How can I achive the last paragraph to be below the
floating black rect, but NOT below the red and blue
columns?

The only way make the clear styles in the middle column ignore
the floats in the other columns, is make the middle column a
float itself. Probably not what you wanted, but there is no
other solution afaik.
Cheers, Jens

BTW: Any idea why my examle does not render ok on IE6 while
it does on Firefox? I have created the example it from a
more complex page that uses the same formatting and does
render ok on IE6...

That's the peek-a-boo bug. Check
http://www.positioniseverything.net/ for more details on that.
On this page:
http://www.positioniseverything.net/easyclearing.html
you can see a way to make IE do what you want, but the other
browsers will still show the problem (but no peek-a-boo).
 
T

Toby Inkster

Jens said:
I have a basic three-column design with a content div in the middle.
http://examples.tobyinkster.co.uk/3col

Now when the content itself uses nested interior CSS formatting such as
floating elements, I run into the problem that 'clear' styles seem to
also refer to the outer floating columns instead of only the lements
inside the parent div.

Yeah. That's just the way float goes.

Try the link above. It positions the side columns using absolute
positioning, so you are free to use floating within your middle column.
 
B

Beauregard T. Shagnasty

Toby said:
http://examples.tobyinkster.co.uk/3col

Try the link above. It positions the side columns using absolute
positioning, so you are free to use floating within your middle column.

Toby, a couple of us were playing with your design over in c.i.w.a.s.
I really like the layout, but there is one problem I can't find a
solution for: putting a footer below all, when the sidebars are
longer than the content.

Footer inside content:
http://home.rochester.rr.com/bshagnasty/test/stale.html

Footer outside content, where we'd like it:
http://home.rochester.rr.com/bshagnasty/test/stalefooter.html

Any idea on how to make the footer be below long sidebars, and full width?


For your own version, -11em instead of -10em on left col, which makes
it better in IE6:
http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html

#left {
left: -11em; /* Toby had a -10em here */
float: none;

Thanks.
 
L

Lauri Raittila

in said:
Toby, a couple of us were playing with your design over in c.i.w.a.s.
I really like the layout, but there is one problem I can't find a
solution for: putting a footer below all, when the sidebars are
longer than the content.

There is hack, if you know how many lines your left sidebar is.

An example:
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Any idea on how to make the footer be below long sidebars, and full width?

Some. Has to be done with floats, I think.
 
L

Lauri Raittila

in said:
If sidebars are dynamic, this won't work.

Why, of course it does, if you count the lines in your script. (which is
actually easier...)
But if sidebar contains free text, then you don't be able to use my hack
on it. In your example, sidebar did contain free text (instead of list
etc.)

I have to say, it is most likely very hard, if not impossible. I have
done it for 2 col, fixed width on left, but it worked only on Opera 6 and
7.0, or Mozilla 1.0 and Opera 7.0 (Opera 7.0 was propably beta)

All results were posted in ciwas, IIRC.

It is quite easy, if you use percentage widths for sidebars and content,
but that tends not work too well. OTOH, with suitable min-widths, results
might be quite good...

ATM I have no idea if it would be possible, I had one, but it didn't
work.
I tried setting a large height to the sidebars, and the footer still
does not go below them (not posted at my site).

The trick in my site is that it menu is absolutely positioned, and there
is element similar size floated under it.
 
T

Toby Inkster

Beauregard said:
Toby, a couple of us were playing with your design over in c.i.w.a.s.

My ears are burning!
I really like the layout, but there is one problem I can't find a
solution for: putting a footer below all, when the sidebars are
longer than the content.

Can't be done properly as far as I know. I did originally include a note
to that effect in the text of the page, but I seem to have removed it in
the process of replacing the "lorem ipsum" in the side columns with useful
information.

Problem is that the sidebars are absolutely positioned, so using "clear"
is out of the question. And as you can't truly know the height of the
columns when writing your CSS, absolutely positioning the footer would be
impossible.

If you know the centre column will be the longest (and it's unlikely that
you'll *know* for *sure*) you could put the footer in the centre column
and set negative left and right margins.

Best solution as I see it would be to include the footer as part of the
centre column and *then* add a piece of Javascript that detects the height
of each of the columns and repositions the footer to the bottom of the
page, with full width.

Of course, with that you'll need to recalculate the size and position of
the footer as part of the document's "onresize" event. And while you're at
it, you can include some code for Netscape 4.x to reload the page onresize.
 
B

Beauregard T. Shagnasty

Lauri said:
Why, of course it does, if you count the lines in your script.
:)

(which is actually easier...) But if sidebar contains free text,
then you don't be able to use my hack on it. In your example,
sidebar did contain free text (instead of list etc.)

We were looking for a way that didn't need line-counting, which could
vary from page to page. Dynamic, as it were. Use in css file, work for
whole site.

Thanks for trying, Lauri.
 
B

Beauregard T. Shagnasty

Toby said:
My ears are burning!

There must be a cure for that ...
Can't be done properly as far as I know. I did originally include a
note to that effect in the text of the page, but I seem to have
removed it in the process of replacing the "lorem ipsum" in the
side columns with useful information.

Problem is that the sidebars are absolutely positioned, so using
"clear" is out of the question. And as you can't truly know the
height of the columns when writing your CSS, absolutely positioning
the footer would be impossible.

If you know the centre column will be the longest (and it's
unlikely that you'll *know* for *sure*) you could put the footer in
the centre column and set negative left and right margins.

That's what I did.
http://home.rochester.rr.com/bshagnasty/test/stale.html
Best solution as I see it would be to include the footer as part of
the centre column and *then* add a piece of Javascript that detects
the height of each of the columns and repositions the footer to the
bottom of the page, with full width.

Oh, pshaw. JavaScript. :-(
Of course, with that you'll need to recalculate the size and
position of the footer as part of the document's "onresize" event.
And while you're at it, you can include some code for Netscape 4.x
to reload the page onresize.

I think I will leave it in the centre column... The OP over in ciwas
wanted to be sure pages with long sidebars and short content could
have full footers. I can live with a narrow one in the middle.

Thanks for your time.
 
D

Duende

While sitting in a puddle Beauregard T. Shagnasty scribbled in the mud:
I think I will leave it in the centre column... The OP over in ciwas
wanted to be sure pages with long sidebars and short content could
have full footers. I can live with a narrow one in the middle.

Put the footer in a frame :eek:)>
 
T

Toby Inkster

Beauregard said:
Oh, pshaw. JavaScript. :-(

Don't dismiss it. It's a good solution. The worst that can happen is that
the user has Javascript disabled, so the footer stays where it is and
they end up with your current solution!
 
B

Beauregard T. Shagnasty

Toby said:
Don't dismiss it. It's a good solution. The worst that can happen
is that the user has Javascript disabled, so the footer stays where
it is and they end up with your current solution!

Heh, the worst that can happen is that I would have to write it! <g>

I'll give it some thought ...
 
J

Jens Lenge

Els said:
The only way make the clear styles in the middle column ignore
the floats in the other columns, is make the middle column a
float itself.

Yes, that works. Thanks for the hint.

However, making the middle column a float seems to break the layout: Firefox
will display all three columns below each other instead of besides each
other, and IE6 seems to do sort of strange things also. I suppose this is a
matter of how to tweak CSS parameters (is almost always is).

Isn't there a way to make the middle column a float while maintaining the
looks of the layout?

Jens
 
J

Jens Lenge

Jens Lenge said:
Isn't there a way to make the middle column a float while maintaining the
looks of the layout?

Just found a solution myself: It works when I specify a width for the float.
Otherwise it does not work.

Cheers, Jens
 
S

Spartanicus

Mark Parnell said:
Which is required by the specs anyway.

"A floated box must have an explicit width..."
http://www.w3.org/TR/CSS2/visuren.html#floats

By CSS 2.0 rules, CSS 2.1 rules specify a shrink to fit behaviour for
browsers. Shrink to fit is implemented by IE, Gecko and Opera 7+. I
presume recent Safari's also use shrink to fit.

But if possible a width should be specified, for the benefit of browsers
that correctly follow the 2.0 rules, and because it aids page layout
whilst loading.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top