Float sandwich?

I'm working on a site with a three-column-float, liquid-center layout
that I believe came from ALA. So, from the top down, the columns are
floats.

In the center column, I'm working on getting tableless forms working.
This again involves floats, from the bottom up through the fieldsets.
For server-side programmatic reasons, the form is itself in a
containing div.

But the form itself isn't floated, and this is causing me problems.
The fieldset expands beyond the form and its containing div, and ends
up overlapping the right column.

You can see a minimal example at:

http://www.jay.fm/files/overlapping.html

I've tried floating the form and its div, but then the "bottom center"
text ends up to the right of the form, for reasons I don't
understand. I've also tried all sorts of position: relative,
clear:both, and width: 100% band-aids to no good effect.

What's the right thing to do here?

Jay Levitt wrote:

I'm working on a site with a three-column-float, liquid-center layout
....

But the form itself isn't floated, and this is causing me problems.
The fieldset expands beyond the form and its containing div, and ends
up overlapping the right column.

You can see a minimal example at:

http://www.jay.fm/files/overlapping.html

So cool: you've actually provided a URL and made a simplified example
which (mostly) validates. I'm really motivated to help you. Now, if only
I knew something about CSS...

I've tried floating the form and its div, but then the "bottom center"
text ends up to the right of the form, for reasons I don't
understand. I've also tried all sorts of position: relative,
clear:both, and width: 100% band-aids to no good effect.

What's the right thing to do here?

The *right* thing? Man, are you picky. I can promise only a hack. My
solution/workaround/total hack first, arm-waving rationale after.

Add a width, e.g. width:10em, to either the fieldset or form rules.

I know you have a width:100% for fieldset already, but that's what's
making it extend too far. I don't know what the fieldset thinks its
width is 100% *of*. By providing a specific width, the problem seems to
go away. In any case, it seems not to have to do with divs or floats.

I actually reduced the problem even more. The code below also shows the
same results:
<form><span>form stuff</span>
<fieldset>in the fieldset</fieldset>
</form>

(<span> is just in there to make <form> more visible behind <fieldset>.)

fieldset { background-color:green; width: 100%; }
form { background-color:yellow; }

Maybe somebody else here who knows about form stying can explain the
problem from this.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

In article <46cbe48f$1_6 (AT) news (DOT) bluewin.ch>,
John Hosking <John (AT) DELETE (DOT) Hosking.name.INVALID> wrote:

So cool: you've actually provided a URL and made a simplified example
which (mostly) validates. I'm really motivated to help you.

O Gee, is that all it takes? Just stand by then John...

--
dorayme

On Wed, 22 Aug 2007 09:24:20 +0200, John Hosking wrote:

Jay Levitt wrote:
http://www.jay.fm/files/overlapping.html

The *right* thing? Man, are you picky. I can promise only a hack. My
solution/workaround/total hack first, arm-waving rationale after.

Add a width, e.g. width:10em, to either the fieldset or form rules.

I know you have a width:100% for fieldset already, but that's what's
making it extend too far. I don't know what the fieldset thinks its
width is 100% *of*. By providing a specific width, the problem seems to
go away. In any case, it seems not to have to do with divs or floats.

Trouble is, then I can't have the form/fieldsets be liquid, which is the
goal. (And I checked, adding width: 100% all the way up doesn't help.)

I actually reduced the problem even more. The code below also shows the
same results:
form><span>form stuff</span
fieldset>in the fieldset</fieldset
/form

(<span> is just in there to make <form> more visible behind <fieldset>.)

fieldset { background-color:green; width: 100%; }
form { background-color:yellow; }

Ohhh, very interesting. So maybe 100% width in a fieldset means something
other than the obvious...

Jay

Maybe somebody else here who knows about form stying can explain the
problem from this.

Jay Levitt wrote:

I'm working on getting tableless forms working.
You can see a minimal example at:

http://www.jay.fm/files/overlapping.html

It's difficult to see what you are really trying to accomplish without
any context. Why don't you put some actual form info in there so we can
better see the real issues?

--
Berg

Jay Levitt wrote:

Ohhh, very interesting. So maybe 100% width in a fieldset means something
other than the obvious...

In John's example, the 100% width for <fieldset> is that of BODY (which
is that of the viewport).
In your original, the 100% width for <fieldset> is that of #center,
which is that of .column, which is that of #container (minus 200px and
minus 150px) of BODY (which is 800px) which means that #center has a
width of 450px.

In both examples, <fieldset> oversets the width of their container
(viewport in the first instance and 450px in the second) because of
<fieldset>'s default padding and margin values as well as the border
value. These default values cause the overset and the extension of
<fieldset> beyond the 100% width.

IE of course has other ideas.

You mention your intent to have a liquid <fieldset>. It is obvious to me
that there is no liquidity in your original example since <fieldset>'s
width is fixed at 450px (plus it's default padding, margin and border
values).

--
Gus

Gus Richter wrote:

In both examples, <fieldset> oversets the width of their container
(viewport in the first instance and 450px in the second) because of
fieldset>'s default padding and margin values as well as the border
value. These default values cause the overset and the extension of
fieldset> beyond the 100% width.

I was right. I *knew* somebody smart would come by with the answer. :-)


--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html