i want to convert my table based layout in to a pure css based one using css and css positioning. I so far created the skeleton of it but the real problem started when i tried to enter divs at the main content. I used float to position it . Basically am a novice in css just started learning it. Any help from the CSS Experts plzz? i will be really indebted to those who helps me out.Am also enclosing the Live demo of my work so far and the css code as well any help plzz. Am also giving the URL of my original site which i wanted to convert into a css one.Thanks in advance

Heres the Live demo of my try sofar :

Live Demo of my effort so far (http://www.raja.supersoftz.com/rajacss/totalcsslay.htm)

Original site of Mine whcih i wanted to convert into a css one (http://www.raja.supersoftz.com/home.htm)
body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #000000;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#contentbg {
background-color: #FFFFFF;
background-image: url(images/main.jpg);
background-repeat: repeat-y;
height: 317px;
width: 760px;
}
#lftcontent {
background-color: #CC0000;
width: 441px;
height: 317px;
float: left;
border: 1px dotted #000000;
}
#rhtcontent {
background-color: #999900;
height: 317px;
width: 238px;
float: left;
border: 1px dotted #000000;
}

#header {
background-image: url(images/header.jpg);
height: 162px;
width: 760px;
background-repeat: no-repeat;
}
#navbar {
background-image: url(images/button.jpg);
background-repeat: no-repeat;
height: 55px;
width: 760px;
}

#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;
}

cheers
Raja:prince:

heres my total plan Click Here (http://img459.imageshack.us/img459/3538/rajacss6zd.jpg) Thanks :bufly:

You can use relative positioning to get the content divs in the right position. Relative position just moves it that many pixels from where it normally would be if you didn't use relative positioning. Does that make sense? I played with your code on my computer and I only had to change these 2 sections to get what you wanted:

#lftcontent {
background-color: #CC0000;
width: 441px;
height: 317px;
float: left;
border: 1px dotted #000000;
position: relative;
left: 40px;
}
#rhtcontent {
background-color: #999900;
height: 317px;
width: 233px;
float: left;
border: 1px dotted #000000;
position: relative;
left: 40px;
}

I had to change the width of the right side because the width you had made it too wide. Good luck =)

Monkey Bizzle Thanks a lot let me try

oh Thanks a lot Monkey Bizzle it worked and i also finished the Nav section
rollovers and now the real challenge starts the leftcontent and the right content where i have to add a shout box. heres mylatest Update (http://www.raja.supersoftz.com/rajacss/totalcsslay.htm) This is my original Table Based Layout (http://www.raja.supersoftz.com/rajanewlay/index.htm) i made using Fireworks. Let me try the finish my rest of the layout .Thanks once again Monkey Bizzle
cheers
Raja

Thanks a lot Monkey Bizzle

No problem =)

Monkey Bizzle i could have been solved this problem using some margin to #lftcontent isnt it ?

Monkey Bizzle i could have been solved this problem using some margin to #lftcontent isnt it ?

Using position relative solved the problem didn't it?

i added some content at the left div(##lftcontent) it worked fine inIE6 my lay out strtched with the content.But the problem is when i see itin Firefox the content is overflowing to the bottom. Plz some one help me.
Click Here plz (http://www.raja.supersoftz.com/rajacss/totalcsslay.htm)

did you assign a height to ".tinytext" or "#leftcontent" ? because i dont see one in your CSS or source code.. :o

salomeyasobko iassigned both width and height to the #lftcontent. It worked in IE6 but whenit comes to the Firefox am having problem.
#lftcontent {
background-color: #FFFFFF;
width: 440px;
float: left;
position: relative;
left: 40px;
height: 317px;
text-align: justify;

Try adding an overflow attribute to it:

#lftcontent
{background-color: #FFFFFF;
width: 440px;
float: left;
position: relative;
left: 40px;
height: 317px;
text-align: justify;
overflow: auto;}

Monkey Bizzle thanks a lot but i dont want the scroll bar there i want my Layout stretch according tothe content canu help me fix my problem plzz?
Thanks in advance.

remove the height from that div

i did it still am having trouble any one helpme fixit plzz.

I realize what you are trying to do now. Sorry =P I have to go to class at the moment so I don't have enough time to take your code and play around with it but try taking the background divs, whichever ones are supposed to stretch, and add height: 100% to them. Hopefully that will work. If not, I'll actually mess with your code when I come back on.

oh thanks a lot Monkey Bizzle am Looking for some one to fix my problem. itried every thing i can. icouldnt locate where the problem actually. Plzz some one help me

oh thanks a lot Monkey Bizzle am Looking for some one to fix my problem. itried every thing i can. icouldnt locate where the problem actually. Plzz some one help me

Did you try my suggestion?

yes i did Monkey Bizzle same problem :((

#contentbg {
background-color: #FFFFFF;
background-image: url(images/main.jpg);
background-repeat: repeat-y;
height: 317px;
width: 760px;
}

take this out

#contentbg {
background-color: #FFFFFF;
background-image: url(images/main.jpg);
background-repeat: repeat-y;
height: 317px;
width: 760px;
}

take this out

Nope it didnt worked.see the Result (http://ddotcom.com/rr/totalcsslay.htm)

i tried even try clear the floats. Nothing happend.Its so annoying.
#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;
clear: both;
}

huh!!! huh!!! huh!!!

plzz some one help me fix my problem

Try this in your CSS:
Add to #wrapper
background-image: url(images/main.jpg);
background-repeat: repeat-y;

(Don't think they are needed in #contentbg )

In #lftcontent
change height: 317px; to height: auto;