CSS 101
A bit of help, if you please…
Check out this page, which contains a 200px wide div floated left, and a fieldset. Note how the fieldset is completely contained to the right of the div.
Now check out this page, which also contains a 200px wide div floated left, but instead of a fieldset, next it has a div. Note how the div goes behind the floated element all the way to the left side of the screen.
I was under the impression that (at least in Firefox) all elements are created equal, and that the fieldset in the first example must just have some styles applied (by the browser) to make it stay completely to the right of the floated div. I was hoping that I could somehow force the div in my second example to behave like the fieldset in the first example, but I can’t seem to figure out how to make that happen without forcing specific margins on the div.
Any ideas?
You could always float the second div left, but I don’t know if that is any more desirable then adding margins.
@Joel – Floating the div causes a number of different issues to be introduced. Not the least of which is the fact that the div would then no longer expand to the right-side of the screen.
When you say fieldset, you are talking about a form fieldset I am assuming?
Yeah – just take a look at the source of those examples…
Can I modify the CSS of #Float?
Well, that kind of defeats the purpose of it. The point is to make the div act like the fieldset regardless of what the float is doing. Know what I mean?
I’m getting the feeling that the fieldset is just a “special” element that does things differently than other elements, which is pretty lame.
That is what I thought too. It looks like you are not the first that has had this question though:
http://csscreator.com/node/14023
I’m not sure if this will fit your needs because it uses margins, but…
#Fieldset {
background:yellow;
float:left;
height:100px;
margin-right:-220px;
width:100%;
}
I think I’ll probably end up doing this, which doesn’t use a float on the div:
#Fieldset {
background:yellow;
height:100px;
margin-left:220px;
}
I have to say, though, this is the kind of thing that drives me crazy about creating standards compliant sites: The standards aren’t standard at all.
It is by far the most frustrating aspect of designing on the web. IE is my achilles heel! What is your primary browser?
Your fix will work just as well as mine, and if the width of the floated element grows or shrinks, your CSS will not break.
Also, it works in Safari!
IE6 on the other hand, there is a space between the floated element and the fieldset. I will send you a screenshot…
I’m on firefox 3.0.6
I don’t bother testing in other browsers until much later in the game. I guess I’m hoping someone else can figure that stuff out. It drives me crazy.
This confuses me as well… Even after applying Eric Meyer’s CSS Reset the `fieldset` is still behaving differently than the div.
It seems that depending on the context, `fieldset` may be semantically correct to use. It exhibits the behavior I expected of all elements when positioned next to other “floated” elements.
It’s “Special”
Good question, do you use Eric Meyer’s CSS Reset Mark? I always do, it is a must for me.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
If you are not using it already, and add it, it will mess up a lot of your layouts. I think it is worth adding and modifying your CSS to work with the reset though. At least then all browsers would have some sort of ‘standard’.
Possibly the freakiest thing I’ve seen today: I tested both these sites in IE6 and other than the border around the fieldset, they look the same!
http://assets.lance-systems.com/public/fieldset-float-problem-ie6.png
@Jeff – No, I didn’t know about it. I’m applying it now to see how things change…
@Matthew – pardon my french, but that is fucking hilarious. Hahaha!
Wait, so the one time IE appears to be doing something right, it is still wrong? HAHA!
Take a look at: http://www.jplambeck.de/div_new.html
Maybe this helps. Only had a few minutes to think about it.
That is a very, very clever solution. But shouldn’t we be able to accomplish stuff like this with css alone? Doesn’t adding markup to the page in order to satisfy design requirements go against everything that css stands for?
I make that argument simply because I’ve been raked across the coals in the past for doing exactly that.
I totally agree with you on that one. I just couldn’t think of another solution that is as simple and still valid. If an idea pops up in my head, I’ll let you know. (I’m no big fan of playing around with margins – Bad experiences I guess)
Not to keep throwing various CSS styles out there, but you could also looking to designing on a grid.
http://960.gs/
Ok, after talking to someone who really knows what he is doing
I guess there are only three solutions out there (I know of):
1) using margins
2) adding markup
3) putting the float div into the fieldset div
I hate it if stupid things like this keep me from doing the real job. Don’t go crazy over this Mark!
I think it’s the fieldset tag that’s buggy because if you apply the style margin-left: 220px to it nothing appears to happen. But if you up the margin 1 pixel to margin-left: 221px; you can see a change.
Now, if you apply margin-left: 220px to #Fieldset, you get the same results as the fieldset tag. I’m not really sure what kind of layout you’re working on, but in most situations I would recommend floating both elements and defining element widths. I seem to run into less problems when floating both elements.
That is because if you have a width of 221px, then it is larger than 100%.
Overflow isn’t an ideal solution as it behaves drastically different on separate browsers.
I’d try clearing the formatting on the fieldset as per Eric Meyer’s advice and then applying the formatting manually through CSS.
Please try avoid using extra markup if it’s not necessary but also please allow for full control if the theme support is going to be similar to Vanilla 1. I would like to be able to control the whole design of the site without having to change the xhtml on the page.
I know there’s a balance you have to make between that but see how you go anyway
The fieldset seems to behave differently than any other block element. However if it were to behave like a div it would not be what you want.
Did someone tried in IE8 (which should be CSS 2.1 compliant)? Is it the expected behavior.
You could remove the margin from side column and apply a padding to the body instead.
IE8-rc1 behaves like safari and ff:
http://tinyurl.com/cpttcy
ps: The service that I linked (netrenderer) failed to render the page correctly the last time I tried. Their IE8 might be in IE7 compatibility mode or something, but I8-rc1 (on win-xp) – in IE8 mode – render the page like Safari and FF.
http://dl.getdropbox.com/u/83967/vanilla/ie8-fieldset.gif
That’s quite weird behavior, of course, fieldset is different. What if somebody could tell how the LEGEND-tag works internally.
According to what I can see from the W3C, elements placed next to floated elements should actually flow “under” the floated element.
http://www.w3.org/TR/CSS21/visuren.html#floats
So, the fieldset is buggy, and IE sucks, as can be seen in the screenshot I posted above.