Help with table matrix

[Chrisj]

I have this html code and css(below).

 

I'd like table "c" and table "d" to be directly under

table "a" and table"b", which they are currently,

but I'm using <br><br> to accomplish that. Which I'm sure is not

the best way to do it. And by using <br><br> the gap between

the top two tables and the bottom two tables is too large.

What should I use instead of <br><br>?

 

Any help would be appreciated. Thanks

 

<ul class="table" id="a">
<li><div>Type</div></li>
</ul>
<ul class="table" id="b">
<li><div>Number</div></li>
</ul>
<br><br>
<ul class="table" id="c">
<li><div>Test</div></li>
</ul>

<ul class="table" id="d">
<li><div>Hello</div></li>
</ul>

 

CSS:

ul.table {
				width:110px;
				margin: 0px 0 0 10px;
				float:left;
				list-style-type: none;
				padding:0;
			}
			ul.table li {
				height:1em;
				margin:0;
				padding:0;	
			}
			ul.table li div{
				width: 100px;
				height: 200px;
				float: left;
				clear:right;
				text-align:center;
				color:black;					
				font-color: #000000;
				font-size: 12px;
				padding:.2em .2em .2em .2em;
			}	
			ul.table li div:first-child {
				color:black;
				float: center;
				clear:none;
			}
			#a {
				border: 1px solid #000000;

			}
			#b {
				border: 1px solid #000000;

			}
			#c {
				border: 1px solid #990099;
			}
			#d {
				border: 1px solid #666666;
}

[haku]

Add clear:left to your ul.table, and then use bottom margins to space them out. Or top margins if you want, but whichever you use, be consistent. I prefer bottom margins myself though.

[Chrisj]

Thanks for your help, but when I added clear:left to the ul.table (shown below). It did nothing.

Then I removed the <br><br> and it moved table "c" and "d" out from underneath table "a" and "b" and now they are directly to the right of table "a" and table "b". In other words that didn't work, unless I did it wrong. Any other help would be appreciated. Thanks.

 

				ul.table {
				width:110px;
				margin: 0px 0 0 10px;
				float:left;
				clear:left
				list-style-type: none;
				padding:0;
			}

[haku]

This works:

 

CSS

<style type="text/css">
.table
{
	float:left;
	clear:left;
}
</style>

 

HTML

<ul class="table" id="a">
<li><div>Type</div></li>
</ul>
<ul class="table" id="b">
<li><div>Number</div></li>
</ul>
<ul class="table" id="c">
<li><div>Test</div></li>
</ul>
<ul class="table" id="d">
<li><div>Hello</div></li>
</ul>

 

If it's not working, then something else in your code is conflicting. Have you set no float to one of the IDs or something?

[Chrisj]

Thank you for your help. I appreciate it.

I have another question, and have started another posting.

Thanks again.