471,599 Members | 927 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

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?

Aug 22 '07 #1
4 1822
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
Aug 22 '07 #2
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
Aug 22 '07 #3
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.
Aug 22 '07 #4
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
Aug 22 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Pat | last post: by
16 posts views Thread by Gerald Lafreniere | last post: by
6 posts views Thread by Dave win | last post: by
9 posts views Thread by Sisyphus | last post: by
11 posts views Thread by Marc Pelletier | last post: by
20 posts views Thread by ehabaziz2001 | last post: by
8 posts views Thread by vjnr83 | last post: by
13 posts views Thread by Shirsoft | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.