[RESOLVED] DIV positioning using UL & LI

[Phill Pafford]

Okay,

So Here is what I want, I have 9 div elements on a page that I want to display like this:

elem #1 elem #2
elem #3 elem #4
elem #5 elem #6
elem #7 elem #8
elem #9

As they are now they display like this

elem #1
elem #2
elem #3
elem #4
elem #5
elem #6
elem #7
elem #8
elem #9

The order is not a big deal I just want to display them by 2 in a row instead of 1 in a row to save screen scrolling and dead space to the right of the divs.

Now each div takes up about 50% of the screen, so they should fit 2 in a row.

is there a way to use the unordered list to get this effect? or another way?

[aj_nsc]

Give your UL the properties:

display:block;
width: 400px; (or whatever width you want to use)

And your li's

display:block;
float: left;
width:200px; (or whatever width you want).


The key is to apply float: left; on your LI's and to give your parent element (i.e. the UL) a width that won't let any more than 2 LI's fit on one "line", if you will.

[Phill Pafford]

thanx, I see that this would work if all the div heights are the same but it looks weird with the divs being different heights.

You solution works though, so thanks for the effort. I am going to try to redesign the layout again to flow better and then use the method you have suggested.

[aj_nsc]

If the div's are different heights and you want to force them to be the same height, then put height:XXXpx; on your LI's.