Menu
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:
[code=html]
<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:
[CODE]
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