CSS TableLess

[madeinacari]

Guys.... I am newbie in CSS tableless design and I wanna build a website w/o tables..... JUST CSS...

Well, I have been working hard on this but I can make it work...

Here is the design that I wanna build...

and here is the code that I have so far...

PLEASE... some CSS GURU answer this puzzle...


Thanks..

Code: Select all

/* CSS Document */

body {
margin: 0;
padding: 0;
font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif;
color: #7c7c7c;
text-align: center;
background-color: transparent;
background-image: url(images/background.jpg);
background-position: center top;
}

#container-main {
margin: 0px auto;
padding: 0;
width: 648px;
border: none;
text-align: left;
background-position: bottom;
}

#container-top {
margin: 0px auto;
padding: 0;
width: 648px;
border: none;
text-align: left;
background-position: bottom;
}
#left {
width: 20px;
background-image: url(images/l-shadow.jpg);
float: left;
height: 543px;
}
#main {
border: none;
background-image: url(images/header.jpg);
float: left;
width: 598px;
height: 67px;
}
#right {
width: 30px;
background-image: url(images/r-shadow.jpg);
height: 543px;
float: right;
}
/*
#container {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-image:url(images/background.jpg);
}
*/
#e-mail-templ-final2-01_ {
position:absolute;
left:0px;
top:0px;
width:81px;
height:600px;
}

#top_ {
position:relative;
top:0px;
width:648px;
height:57px;
background-image: url(images/top.jpg);
}

#background_ {
position:absolute;
left:729px;
top:0px;
width:243px;
height:600px;
}

#e-mail-templ-final2-04_ {
position:absolute;
left:81px;
top:57px;
width:20px;
height:90px;
}

#header_ {
position:relative;
top:57px;
width:598px;
height:67px;
background-image: url(images/header.jpg);
}

#e-mail-templ-final2-06_ {
position:absolute;
left:699px;
top:57px;
width:30px;
height:90px;
}

#red-bar_ {
float: left;
width: 598px;
height: 17px;
background-color: #990000;
border-top-width: medium;
border-right-width: 0px;
border-bottom-width: medium;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}

#l-shadow_ {
position:absolute;
left:81px;
top:57px;
width:20px;
height:542px;
background-image: url(images/l-shadow.jpg);
}

#title-content_ {
left:139px;
top:143px;
width:452px;
height:33px;
background-image: url(images/title-content.jpg);
float: left;
}

#ncaa_ {
height:67px;
background-image: url(images/ncaa.jpg);
float: right;
width: 146px;
}

#r-shadow_ {
position:absolute;
left:699px;
top:56px;
width:30px;
height:544px;
background-image: url(images/r-shadow.jpg);
}

#e-mail-templ-final2-12_ {
position:absolute;
left:81px;
top:154px;
width:20px;
height:446px;
}

#e-mail-templ-final2-13_ {
position:absolute;
left:699px;
top:156px;
width:30px;
height:444px;
}

#content_ {
left:101px;
top:180px;
width:452px;
height:349px;
background-color: #FFFFFF;
float: left;
}

#e-mail-templ-final2-15_ {
position:absolute;
left:553px;
top:214px;
width:146px;
height:1px;
}

#big-pix-golf_ {
left:553px;
top:215px;
width:146px;
height:265px;
background-image: url(images/big-pix-golf.jpg);
float: right;
}

#facilities_ {
left:553px;
top:480px;
width:146px;
height:16px;
float: right;
background-image: url(images/facilities.jpg);
}

#facilities-pix_ {
left:553px;
top:496px;
width:146px;
height:51px;
float: right;
background-image: url(images/facilities-pix.jpg);
}

#e-mail-templ-final2-19_ {
position:absolute;
left:101px;
top:529px;
width:156px;
height:18px;
}

#bottom-shadow_ {
left:101px;
top:529px;
width:452px;
height:18px;
background-image: url(images/bottom_shadow.jpg);
float: left;
}

#e-mail-templ-final2-21_ {
position:absolute;
left:262px;
top:529px;
width:291px;
height:71px;
}

#e-mail-templ-final2-22_ {
position:absolute;
left:101px;
top:547px;
width:19px;
height:53px;
}

#lu-seal-bottom_ {
position:absolute;
left:186px;
top:365px;
width:137px;
height:53px;
}

#bottom-backg_ {
left:101px;
top:547px;
width:598px;
height:53px;
background-image: url(images/bottom-backg.jpg);
float: left;
}

#e-mail-templ-final2-25_ {
position:absolute;
left:553px;
top:547px;
width:47px;
height:53px;
}

#apply-now_ {
position:absolute;
left:434px;
top:390px;
width:86px;
height:53px;
}

#e-mail-templ-final2-27_ {
position:absolute;
left:686px;
top:547px;
width:13px;
height:53px;
}

[ukgeoff]

Can you let us see the html file so that we can see how the css fits with your markup.