[RESOLVED] Boxes!! - Table trouble

[Jay77710]

Okay so I'm trying a new layout sort of thing that I've never done before... the whole idea is that my content area is in a square of four conjoined boxes in the center of the page. Think of it as a four-square court.

I've been attempting to get these squares aligned just right, but I can figure out how. The best I've gotten so far is putting it in a table:

<div id="content">
<table>
   <tr>
      <td><div id="1">1</div></td>
      <td><div id="2">2</div></td>
   </tr>
   <tr>
      <td><div id="3">3</div></td>
      <td><div id="4">4</div></td>
   </tr>
</table>
</div>

The CSS relating to the divs and table:

table, tr, td {
	padding: 0;
	margin: 0;
	}
#content {
	width: 400px;
	height: 400px;
	border: 1px solid #EEE;
	}
#1, #2, #3, #4 {
	width: 200px;
	height: 200px;
	}
#1 {
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	}
#4 {
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
	}

Simple enough, right? My problem is the squares don't align quite right. It's like the table has a padding or margin or something that puts space between the boxes that I can't get rid of. I need these boxes to come together perfectly with no space in between, but I can't figure out how to do that.

So yeah any suggestions on how to get my boxes to fit together would be awesome... if you'd like to have the whole source code so you can test it in your browser to see how it looks, send me a message with your email address, and I'll email you the file.

Thanks,
Jay

[nyx]

It's probably the cellspacing / cellpadding on the table elements.

I would however at this early stage, recommend that you try to use purely divs and css for the layout over tables, it's a much better habit to get into.

[Jay77710]

I tried that at first, but I wasn't sure how to get to get the boxes next to each other rather than straight down in a line. How would I go about that?

[nyx]

To reproduce the layout you've created with the table, I would remove the table but create two new divs around each 'row' of two divs. I'd then float the elements with CSS:

.row, .row div
{
float:left;
}

.row
{
clear:both;
}

which would make the children div elements sit next to each other. The clear will force the items with the 'row' class to sit beneith each other. If you were to force the width of the container, you wouldn't need to use the clear

[Jay77710]

ohhh... that worked perfectly. Thank you so much!