Okay, confused now ... tables inside of divs making div show up wrong

[Jax2]

I don't know what happened here. One day, everything on my site was perfectly fine. Then, I either changed something and don't remember doing it, or something happened, but now all of my stuff is lining up wrong.

 

I have a 3 column liquid layout with header and footer. I have container, header, sidebar1, sidebar2, main content and footer, in that order.

 

Sidebar 1 - float left, 23%, sidebar 2 - float right, 23%, main content - 54%...

 

so it should be coming up right.

 

If I create a table inside the layout under "Main Content", it works fine as long as I don't specify the width, which I do on all my tables because I'd like them to be 95% of the main content div, which they're inside of.

 

It used to work, looked perfect. Now, if I specify my width to 95%, the content is shoved way below the end of the longest side bar, whether it's 1 or 2.

 

Here's an example:

 

www.townsendscripts.com/demos/recipe/submit.php -- This is wrong. The submit recipe stuff should be at the top. This is with a table specified at 95% width.

 

www.townsendscripts.com/demos/recipe/submit2.php -- This is how it SHOULD look, only it's not wide enough. I didn't specify a width on the table, but I'd like it to be 95% of the main content.

 

I never put the table inside of their own div before, and again, it's always worked, up until when I checked it today and it's no longer working. It's throwing off my entire site which consists of a ton of pages, most of which use tables inside the main content div.

 

If it helps, here is my (messy) css script (which I got from creating a blank template with dreamweaver (eww))

 

Oh, and btw, my css file ends in PHP so I can edit colors and such from the admin section, which works perfectly fine, so I'm pretty sure that's not the problem, as it worked fine before all this went bad.

 

 

<?php
include ("../includes/db.php");
$sql="select * from ".$prefix."configure";
$result=mysql_query($sql, $db);
	while ($row=mysql_fetch_array($result))
{
?>
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #<?php echo $row['background_color'];?>;
background-image:url('../images/<?php echo $row['background_image'];?>'); 
margin: 0; 
padding: 0;
text-align: center;
color: #<?php echo $row['Text_color'];?>;
}
.thrColLiqHdr #container { 
width: 95%;  /* this will create a container 80% of the browser width */
background: #<?php echo $row['MainBody_color'];?>;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
} 
.thrColLiqHdr #header { 
background: #<?php echo $row['HeaderFooter_color'];?>; 
padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border-bottom-style: thin; 
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
height: 150px; 
} 
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-style:italic;

}

.thrColLiqHdr #sidebar1 {
float: left;
width: 23%;
background: #<?php echo $row['MainBody_color'];?>;
padding: 15px 0;
margin: 5px o;

}
.thrColLiqHdr #sidebar2 {
float: right;
width: 23%;
background: #<?php echo $row['MainBody_color'];?>;
padding: 15px 0;
border-left: thin;
border-color: black;


.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; 
margin-right: 10px;
}

.thrColLiqHdr #mainContent {
width: 54%; 
margin: 0 24% 0 23.5%;
background: #<?php echo $row['MainBody_color'];?>;
border-left-style: solid;
border-color:transparent;

}


.thrColLiqHdr #footer { 
padding: 0 10px;
background:#<?php echo $row['HeaderFooter_color'];?>;
border-top-style: thin; 
border-top-color: black;
border-top-style: solid;
border-top-width: 1px; 
} 
.thrColLiqHdr #footer p {
margin: 0; 
padding: 10px 0;
}

}
#members {
width: 95%;
padding: 10px;
float: left;
margin-top: 1px;
}
#members a:link, #members a:visited, #members a:hover {
text-decoration: none;
}
#nav {
width: 85%;
padding: 10px;
margin-top: 1px;
float: left;
}
#nav li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #<?php echo $row['MainBody_color'];?>;
} 
#nav a:hover
{
background-color: #<?php echo $row['menumouseon'];?>;
color: #00000;
} 
#nav a:link, #nav a:visited #menu1 a:visited
{
color: #000000;
text-decoration: none;
} 
#nav a
{
color: #000000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #<?php echo $row['MainBody_color'];?>;
border-bottom: 1px solid #eee;
} 
#nav ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
} 
#nave li
{
display: inline;
/* for IE5 and IE6 */
} 

.fltrt { 
float: right;
margin-left: 8px;
}
.fltlft { 
float: left;
margin-right: 8px;
}
.clearfloat { 
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#usermenu {
width: 100%;
float: left;
}
#usermenu ul {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#usermenu a, #usermenu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#usermenu h2 {
color: #000;
background: #<?php echo $row['menumouseon'];?>;
text-transform: uppercase;
}

#usermenu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#usermenu a:hover {
color: #a00;
background: #fff;
}
#usermenu li {position: relative;}

#usermenu ul ul {
position: absolute;
z-index: 500;
}

#usermenu ul ul ul {
top: 0;
left: 100%;
}

div#usermenu ul ul,
div#usermenu ul li:hover ul ul,
div#usermenu ul ul li:hover ul ul
{display: none;}

div#usermenu ul li:hover ul,
div#usermenu ul ul li:hover ul,
div#usermenu ul ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#usermenu ul li {float: left; width: 100%;}
#usermenu ul li a {height: 1%;} 

#usermenu a, #usermenu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

<?php
};
?>

 

 

[JustLikeIcarus]

You problem is a missing Semi-colon in your css which is causing you margin statements for mainContent to not take affect.  Ive pointed it out below.

 

.thrColLiqHdr #sidebar2 {
float: right;
width: 23%;
background: #<?php echo $row['MainBody_color'];?>;
padding: 15px 0;
border-left: thin;
border-color: black;

    <----- Should be a semi there.

.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; 
margin-right: 10px;
}

[nano]

Good spot 

 

Should be a closing curly bracket though and not a semicolon

 

}

 

[JustLikeIcarus]

You problem is a missing Semi-colon in your css which is causing you margin statements for mainContent to not take affect.  Ive pointed it out below.

 

.thrColLiqHdr #sidebar2 {
float: right;
width: 23%;
background: #<?php echo $row['MainBody_color'];?>;
padding: 15px 0;
border-left: thin;
border-color: black;

    <----- Should be a semi there.

.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px; 
margin-right: 10px;
}

 

Oh yeah.. duh... Im so in the habit of noticing missing semi's that its haunting me. sorry about that.