Re: [css-d] Columns with more than one element
Generally I'd wrap each row in a separate div with a clear:both style
assigned to it.
style
div.row {
clear: both
}
/style
div class=row
div id=aa/div
div id=bb/div
/div
div class=row
div id=cc/div
div id=dd/div
/div
Might not be ideal though and I'm sure more experienced CSSers would
have a better suggestion. I'd be keen to a way to avoid the extra markup
myself!
Oops, and I note there's no quotes on your id attributes!
Tony
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Columns with more than one element
Hello all,
I have a document with 8 DIV elements. I want 4 to be in the left column and
4 to be in the right column.
Now here is the fun part - I want to control which element is in which
column, using style only.
It seems simple: to move an element to the right column - just change its
style to float:right, and the same for left.
It works fine in IE6, as you can see here:
http://tora.us.fm/floattest.html
However, in FF1, there are strange empty blocks in seemingly random
positions, as you can see in the same link:
http://tora.us.fm/floattest.html
Is there a way to fix it?
Thanks a lot,
Erel
N.B. Here is the code:
style
#a, #b, #d, #h {float:left; width:49%; clear:left; background:pink;
margin:1px}
#c, #e, #f, #g {float:right; width:49%; clear:right; background:lightgreen;
margin:1px}
/style
hr style='clear:both'
div id=aa/div
div id=bb/div
div id=cc/div
div id=dd/div
div id=ee/div
div id=ff/div
div id=gg/div
div id=hh/div
hr style='clear:both'
To move, say, element a to the right and element g to the left, just change
the style to:
#g, #b, #d, #h {float:left; width:49%; clear:left; background:pink;
margin:1px}
#c, #e, #f, #a {float:right; width:49%; clear:right; background:lightgreen;
margin:1px}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Columns with more than one element
Thursday, September 1, 2005, 6:17:35 AM, [EMAIL PROTECTED] wrote: It seems simple: to move an element to the right column - just change its style to float:right, and the same for left. It works fine in IE6, as you can see here: http://tora.us.fm/floattest.html IE breaks a rule of the float specs: http://www.w3.org/TR/CSS21/visuren.html#propdef-float (was also in CSS2) 5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source... any...floated box means left /or/ right floated. So you can stack floats to one side all you want, but compliant browsers shouldn't let you stack floats one direction then start floating blocks on the other and expect them to slide up the side like IE does. Eric Meyer ran into this limitation a long time ago in one of his demos: http://meyerweb.com/eric/css/edge/slantastic/demo2.html By adding some containers to your source I was able to /mostly/ pull this off in compliant browsers (not IE) keeping your source order: http://mrclay.org/tests/float_rule5 ...But the fixed negative top margin eliminates this layout's ability to handle an arbitrary amount of text. Someone more clever might be able to come up with a solution using more/different containers and some negative side margin magic so that you could keep your source order and have it accommodate any amount of text. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
