6 replies [Last post]
anzlovar
Offline
Regular
Last seen: 16 years 35 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

Hello!

I have put up a 3 column design and followed a http://www.csscreator.com/attributes/containedfloat.php guideline.

Unfortunately this 'hack' only works on 2 nested floats. I have 3 floats in there... Central column is first, left column second and right column third. The left column (being second in line) does not stretch the mother container...
Have a look.
http://sdb.rkc.si/.

Why do I want to do this?
Because a right schemantic for a styleless portal is:
header->content->column1->column2->footer
and not
header->column1->content->column2->footer
as most people like to design. I have done extended research for a client of mine with several blind users and we came up with this layout, but gecko seems to have a problem with it (oddly enough, Opera and Konq are fine with it, IE is out of this equation alltogether anyway.)

Thanx for any help.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

clear:both and contained floats

Hi anzlovar,
It seems somehow related to the -750px margin on #c1.
One thing I tried just in firefox was to remove that margin from #c1.
Remove the float from #main and set it to position:relative;
Set float to right on #c2.
Give #c1 and #c2 a negative top margin to put them in place.

Like I said I just played quickly in firefox but the footer is in place.

Hope that helps

anzlovar
Offline
Regular
Last seen: 16 years 35 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

-750

It would in deed seem so, but that's a nasty bugger.

Putting a negative top margin on #c1 and #c2 is not really a solution, because all three divs are floating in height. I need them to be opsitioned starting on the same line and I surely want the #main->#c1->#c2 order in the document.

Sigh...

anzlovar
Offline
Regular
Last seen: 16 years 35 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

True

I have found out, that Gecko's layout becomes radically erratic and unpredictible with ANY floated elements inside a container. The clear:both thingy does nothing if you have both left and right floated elements. Having more than 2 elements inside a container will also yield an erratic result.

This is rather disturbing. No. *beep*! I am as mad as a hippo with a hernia!

Take care.
Evil Evil Evil Evil Evil Evil Evil

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

clear:both and contained floats

Hi anzlovar,
Have you thought about absolutely positioning one of the columns?

I don't think the problem is having 3 floated columns, like I said before it is to do with the -750 margin.

So find a solution that doesn't require the -750.

Hope that helps rid you of your hernia.

anzlovar
Offline
Regular
Last seen: 16 years 35 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

Hernia

](*,)

Well, hernia is here to stay.

Ok. Whenever the negative margin of a div is (in absolute terms) larger than the width of the div in question, the container div ignores the height of the floated div inside. In Gecko, of course.

This is an undefined situation per w3 standard for css2.1. Never the less - a visible div with a "width" should have a "height" as well. There is no reason, why one dimension should disappear when a negative margin exceeds and element's implicit width.

Ok, I had no luck by specifying a negative margin on one side, but a larger margin on the other side should compensate for Gecko's inability to set height to divs with negative margins. The reason is, that - in every wich way - I end up with a content, to wide for it's container. It then starts to wrap and everything goes wrong in all new ways. Didn't even bother looking that up in IE. I know i'd get a cerebral hemmorage along with that hernia.

Here's a hack:

The "main" div stays where it is: +200px margin on the left.
The "c1" div goes back -750px (the width of "main" and "c1" combined).
The right margin of "c1" becomes 1px larger than the width of "main" and "c1" combined - 751px.
The "c2" begets a -1px margin on the left, to position it properly.

VOILA. Works. Some quirx in Konq.
Need to fix (break) older IEs though, but this was really a nasty one.

anzlovar
Offline
Regular
Last seen: 16 years 35 weeks ago
Joined: 2004-09-09
Posts: 14
Points: 0

clear:both and contained floats

Tony wrote:

Have you thought about absolutely positioning one of the columns?

Not even in my wildest dreams Wink
That's not in my vocab Wink))