mhopkins321 mhopkins321 - 12 days ago 9
CSS Question

Have two tables next to each other while also using header and sidebar css

I have a very simple php page that contains a header, and a nav sidebar. In the content area of the page I'm trying to get two tables to reside next to each other. Instead of on top of one another.

It seems that in their current state they go directly below the nav side bar instead of leaving every thing below the sidebar for whitespace:

http://jsfiddle.net/qgEbZ/

current look

desired look

HTML

<HTML>
<HEAD>
<link rel='stylesheet' type = 'text/css' href = 'default.css' />
</HEAD>
<BODY>
<div id = 'headContainer'>
<div id = 'header'>
<?php include 'header.html'; ?>
</div>
</div>
<div id = 'sideContainer'>
<div id= 'navMain'>
<?php include 'sidebar.html'; ?>
</div>
</div>
<div id = 'content'>
<TABLE>
<TR>
<TD>Left Table</TD>
</TR>
<TR>
<TD>Left Table</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD>Right Table</TD>
</TR>
<TR>
<TD>Right Table</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>


CSS

#sideContainer {
float:left;
}

#navMain {
margin-left:25px;
color:#999999;
font-family:Tahoma, Geneva, sans-serif;
}

#headContainer {
width: 100%;
position:relative;
top:0px;
height: 150px;
}

#header{
margin:0px auto;
height: 150px;
}

#content {
float:left;
padding-left: 10px;
padding-top: 10px;
}

Answer

While using TABLES for layout is bad form, you can accomplish this by simply floating your tables.

#content table {
    float:left;
    width:50%
}