Float sandwich?

[Jay Levitt]

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?

[John Hosking]

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>

(<spanis just in there to make <formmore 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

[dorayme]

In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:

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

[Jay Levitt]

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>

(<spanis just in there to make <formmore 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.

[Bergamot]

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