CSS positioning woes

whiteshadow

Hi

Ive got 5 div tags made to look like tables
an example is

<div class="table" id="[B]life_1[/B]">

	<div class="tableheader">Life Insurance &amp; Mortgage Protection</div>

	<div class="tablebody">
Complete this form to see an immediate online quote for Level Term, Mortgage Protection and Serious Illness Insurance. 
Products available to residents of the Republic of Ireland only.
	</div>
</div>

So they are labelled
<div class="table" id="life_1">
..life_2, life_3, life_4, life_5

So instead of them displaying all in one
big line like this

[1]
[2]
[3]
[4]
[5]

i want to put it into two columns
like this

[1][3]
[2][4]
[5]

The elements can be varying in height
so i cant position them absolutely.

Anyone help????

grahamor

<div id="life_1"></div>
<div id="life_3"></div>
<div id="life_2"></div>
<div id="life_4"></div>
<div id="life_5"></div>

add in a clear:both to #life_2 and #life_5. You might need to float all the elements left aswell. I think this is right.

Hope it helps

whiteshadow

problem is they have to be
marked up in this order...
<div id="life_1"></div>
<div id="life_2"></div>
<div id="life_3"></div>
<div id="life_4"></div>
<div id="life_5"></div>

or maybe that isnt a problem.
ill give it a shot

smcelhinney

How about

<style type="text/css">
.left { float: left; }
.right { float: right; }
}
</style>
<div>
<div class="left">blah</div>
<div class="right">blah</div>
<div class="left">blah</div>
<div class="right">blah</div>
<div class="left">blah</div>
</div>

You should have sizes though on these. Use em's of course. (pixels/16). more accessible.

whiteshadow

problem is i cant change the markup at all.
im stuck with the divs like they are and then
need to just solely use css to position them.

louie

if you have access to change and ad an extra div you can do it like this:

<div style="clear:both;text-align:left;">
<div id="life_1" style="float:left;"></div>
<div id="life_2" style="float:left;"></div>
</div>
<div style="clear:both;text-align:left;">
<div id="life_3" style="float:left;"></div>
<div id="life_4" style="float:left;"></div>
</div>
<!-- and so on..-->