Previous Message
Next Message

Columns with more than one element

Sent by Css on 1 September 2005 09:09


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=a>aaaaa</div>
 <div id=b>bbbbb</div>
 <div id=c>ccccc</div>
 <div id=d>ddddd</div>
 <div id=e>eeeee</div>
 <div id=f>fffff</div>
 <div id=g>ggggg</div>
 <div id=h>hhhhh</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-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: