Alignment Issue with the unordered list...Very Urgent!!!

[anu_123]

Hi,
Requirement:In a row there shud be a maximum of 3 unorderd lists.
The 4th unorderd list shud be under the 3rd unorderd list item.
If there are more number of list items,the 4thcolumn doesnot
come under the 1stcolumn.Instead it gets aligned under the 1st column.
The width of the page is 61em.
Also it works only in fire-fox and not in IE
Pls clarify my doubt




HTML
<div id="columnUnorderedList">
<div>
<h2><a href="#">col1</a></h2>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>

</ul>
</div>

<div>
<h2><a href="#">col2</a></h2>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>

<div><h2><a href="#">col3</a></h2>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</div>
<div><h2><a href="#">col4</a></h2>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
<div><h2><a href="#">col5 </a></h2>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</div>
<div><h2><a href="#">col6</a></h2>
<ul>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
</ul>
</div>
<div><h2><a href="#">col7</a></h2>
<ul>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
</ul>
</div>
</div>

CSS

#columnUnorderedList {
font-family: Arial;
font-size:12px;
color:#FFFFFF;
vertical-align:top;
}

#columnUnorderedList div {
float:left;
width:30%;
}
#columnUnorderedList ul {
display:inline;
}


#columnUnorderedList h2{
padding-bottom:8px;
padding-top:20px;
font-weight:bold;
}

#columnUnorderedList ul li {
list-style:disc;
font-weight:normal;
margin-left:60px;


}
#columnUnorderedList ul li a {
color:#FFFFFF;
text-decoration:none;
}

#columnUnorderedList ul li a:hover{
color:#C2H4H7;
}

[CSSFUN]

#columnUnorderedList ul {
display:inline;
}

please try display:block.

[anu_123]

sorry.. it was a typo error
The 4th unorderd list shud be under the 1st unorderd list item.
The 7th unorderd list shud be under the 4th unorderd list item
If there are more number of list items in the 1st column,then the 4thcolumn doesnot
come under the 1stcolumn.Instead it gets aligned under the 3rd column.
The width of the page is 61em.
Also it works only in fire-fox and not in IE
As u have suggested,tried using
#columnUnorderedList ul {
display:block;
}
but didnt work....

Pls clarify my doubt.


Expected output


col1 col2 col3
A A A
B B B
C C
D
E
F
col4 col5 col6
C C E
D D F

col7
G
H

Actual output:

col1 col2 col3
A A A
B B B
C C
D
E
F
col4
C
D
col5 col6 col7
C E G
D F H

[CSSFUN]

add "height" for "#columnUnorderedList ul"
In firefox, if the height of a item cell not define, it only keeps as is not like IE would expend automatically.

[WebJoel]

sorry.. it was a typo error
The 4th unorderd list shud be under the 1st unorderd list item.
The 7th unorderd list shud be under the 4th unorderd list item...

U KNOW WUT??!!!!!! WTH LOL -AFTAR SEVERAL HOURS OF R3ADNG T3XT LIEK THES SI BCOMES INCREASNGLEY DIFICULT 2 DECIED WH3THAR 2 HELP OR JUST MOVA ON U KNOW?!!?? OMG WTH LOL -)

More: http://thespecial.ca/ts/2007/11/post.html :D

[Centauri]

Every 4th <ul> will need a clear:left; in its style to achieve the look you are after.

[anu_123]

Many thanks for the suggestion.
Is it possible to achieve this look and feel without using clear:left.
The content management tool tht I am using needs the code to be kept simple.Its going to perform the same operation for every <ul>
Any help would be gratefully received.