Problem with two column CSS layout and tables

[gottaloveit]

Hello all,

I"m making two column layout using CSS - a method I've used many times. However, this time, I am inserting a table into the left hand column of my layout. When the table is inserted, the columns to funny things: both columns crowd into the space of the left column, and overlap, instead of sitting side by side as they should. When I take out the table, everything is fine. But when it goes back in, the columns start overlapping again.

I've tried a few things, such as setting the position of the left column to absolute, setting the float of the second column to "right", and other things like that.

Any ideas on how to fix this?

Here is my css:

/*THIS IS THE WRAPPER THE COLUMNS FIT INSIDE*/
#mainwrapper_squarecorners {
margin: 0;
padding:0;
width:760px;
height:900px;
background:white;
}

/*THIS IS THE FIRST COLUMN*/
#detail_pane {
margin:0;
padding:0;
width:310px;
height:900px;
float:left;
background:blue;
}

/*THIS IS THE SECOND COLUMN*/
#results {
margin:0;
padding:0;
width:450px;
height:900px;
float:left;
background:red;
}
Edit:
OOps: figured out my problem: I had not closed my table with a </table>. That was causing the layout to to wacky things.

 

[TechAsh]

Glad you got it fixed.

*Closed*