i really dont understand these divs at all.

[lpeek]

right.. so i kept being told that i need to use css instead of tables. everyone had perfectly valid reasons and i knew a little css already so i thought why not.

converted my whole site to css and now im having problems here there and everywhere. i never expected css to be so complicated.

the main problems im having is that i want all my content boxes 'divs' to basically... connect themselves to the previous divs.

but the problem is....

i can only position them using x and y co-ordinates... which isnt very usefull when you have a login box that gets longer in height when someone logs in... so the div below it then overlaps it...

i just dont understand what attributes i have to use when defining my divs to make them function correctly... ive searched so many websites and read so much about this but it just doesnt work.

here is the site:

www.jrevolution.net

and heres my defining code:


div#contentwrap
{
margin-left: auto;
margin-right: auto;
width: 900px;
}

div#header
{
position:absolute;
z-index:2;
left:50%;
margin-top:0px;
margin-left:-451px;
width: 900px;
height: 100px;
}

div#nav
{
width: 898px;
height: 24px;
position:absolute;
z-index:2;
left:50%;
margin-top:101px;
margin-left:-451px;
background-image:url(images/nav.gif);
background-repeat:repeat;
border:solid;
border-width:1px;
}

div#account
{
width: 148px;
float:left;
position:absolute; z-index:2; left:50%; top:0%;
margin-top:133px;
margin-left:-451px;
background-color:#CCCCCC;
border:solid;
border-width:1px;
}

div#leftlink
{
width: 148px;
float:left;
position:relative; z-index:2; left:50%; top:0%;
margin-top:auto;
margin-left:-450px;
background-color:#CCCCCC;
border:solid;
border-width:1px;
}

div#center
{
width: 586px;
float: left;
position:absolute; z-index:2; left:50%; top:0%;
margin-top:133px;
margin-left:-300px;
margin-right:auto;
background-color:#CCCCCC;
border:solid;
border-width:1px;
padding:5px;
}

div#rightad
{
width: 138px;
position:absolute; z-index:2; left:50%; top:0%;
margin-top:133px;
margin-left:299px;
padding:5px;
background-color:#CCCCCC;
border:solid;
border-width:1px;
}

div#footer
{
width: 586px;
height: 60px;
margin-left:0px;
margin-top:20px;
bottom:0px;

}

[_Aerospace_Eng_]

Floats are no use when you use position:absolute. Remove position:absolute from your CSS, let things float naturally.

[lpeek]

tried that... but now everything just floats wherever it wants... theres no organisation to it at all??

www.jrevolution.net

EDIT

Ive almost cracked it...

ive used separate content wraps for the left center and right collumns. now i should be able to float everything into its right place.

thanks

[felgall]

The page builds from the top left corner of the screen when you don't change the ordering using position.

The properties you should be using for your positioning are:

margin
padding
width
float
clear
overflow

Make sure the HTML lists the content in the order you want it to appear starting at the top left and apply the above properties to the content piece at a time to position it.

Trying to style the entire page at once is only possible once you are an expert at CSS and maybe not even then. Do it one part at a time.