css table in table problem... edit my script

[auriaks]

hi, I faced some troubles when i made this basic appearance to my site:



* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Arial, sans-serif;
background: url(images/2laida/bg-1.png) center no-repeat;
background-attachment:fixed;
}

ul#head {
height: 72px;
list-style: none;
margin: 0 auto;
}
ul#head div#virsus {
height: 72px;
width: 900px;
background: url(images/2laida/visas[naujesnis].png) center no-repeat;
margin: 3 auto;
}
#up-col {
height: 10px;
width: 900px;
margin: 2 auto 0 auto;
background: url(images/2laida/up.png) center no-repeat;
}
#container {
width: 900px;
margin: 0 auto;
background: url(images/2laida/middle.png) center repeat-y;
}
#container .left-side {
float: left;
width: 230px;
border: 2px solid #CCCCCC;
}
#container .right-side {
float: right;
width: 600px;
border: 2px solid #CCCCCC;
}

#footer {
height: 10px;
width: 900px;
background: url(images/2laida/down.png) center no-repeat;
margin: 0 auto 2 auto;
}



So, these two tables should be in container:


#container .left-side {
float: left;
width: 230px;
border: 2px solid #CCCCCC;
}
#container .right-side {
float: right;
width: 600px;
border: 2px solid #CCCCCC;
}

But the problem is that background of container disappears somehow. Can you help me with this?
Also, maybe there is some mistakes in other thing... just say what you think about this :) thanks

[auriaks]

If i write something like that into my .css


#container div#left-side {
float: left;
width: 230px;
border: 2px solid #CCCCCC;
}
#container div#right-side {
float: right;
width: 600px;
border: 2px solid #CCCCCC;
}


My browser stops showing the middle tables' background...

[gurmeet]

link to the out put page

[gurmeet]

If i write something like that into my .css


#container div#left-side {
float: left;
width: 230px;
border: 2px solid #CCCCCC;
}
#container div#right-side {
float: right;
width: 600px;
border: 2px solid #CCCCCC;
}


My browser stops showing the middle tables' background...



float both containers to left side....


andadd a code at the bottom of DIV Conatainer:
<br class='clear'>


.clear
{
clear:both;
}

may b it l figure out the proble,else u give the put put link...

[tpravioti]

i think you must correct these in red:



* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Arial, sans-serif;
background: url(images/2laida/bg-1.png) center no-repeat;
background-attachment:fixed;
}

ul#head {
height: 72px;
list-style: none;
margin: 0 auto;
}
ul#head div#virsus {
height: 72px;
width: 900px;
background: url(images/2laida/visas[naujesnis].png) center no-repeat;
margin: 3px auto;
}
#up-col {
height: 10px;
width: 900px;
margin: 2px auto 0 auto;
background: url(images/2laida/up.png) center no-repeat;
}
#container {
width: 900px;
margin: 0 auto;
background: url(images/2laida/middle.png) center repeat-y;
}
#container .left-side {
float: left;
width: 230px;
border: 2px solid #CCCCCC;
}
#container .right-side {
float: right;
width: 600px;
border: 2px solid #CCCCCC;
}

#footer {
height: 10px;
width: 900px;
background: url(images/2laida/down.png) center no-repeat;
margin: 0 auto 2px auto;
}


or try 'em' instead of 'px'...