PDA

View Full Version : I know some body knows about AP divs ruining layouts



vlystad
Mar 18th, 2010, 02:10 AM
Hello every one. I know somebody has the answer.I have been working on this new page for 3 days and have learned quite a bit about AP div positioning. So I have a container div called "wrapper".

#wrapper {
width: 801px;
height: 1193px;
margin: 0 auto;

}

Then I have 6 AP divs, five of which work correctly. They are set to relative positioning, and work correctly. The 6th div is set to absolute, because it messes up my layout bad, but doesn't work right when you resize the browser window (obviously), as seen here.

http://saberinc.net/site_redesign/screw_up.html

When I set apdiv6 to relative this happens

http://saberinc.net/site_redesign/screw_up_div6_problem.html

Please help me figure this out. (And I already know that tables are bad.)

Thank you,
Victor

#apDiv1 {
position:relative;
width:213px;
height:65px;
z-index:1;
left: 50px;
top: -18px;
visibility: visible;
font-size: 24px;
font-style: italic;
color: #B0263C;
font-weight: bold;
}

#wrapper {
width: 801px;
height: 1193px;
margin: 0 auto;
text-align: left;
}

#apDiv2 {
position:relative;
width:213px;
height:300px;
z-index:2;
left: 50px;
top: -15px;
text-align: justify;
}
#apDiv3 {
position:relative;
width:213px;
height:60px;
z-index:3;
left: 50px;
top: 0px;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #B0263C;
}
#apDiv4 {
position:relative;
width:213px;
height:300px;
z-index:4;
left: 50px;
text-align: justify;
top: 5px;
}
#apDiv5 {
position:relative;
width:259px;
height:83px;
z-index:5;
left: 300px;
top: -725px;
color: #B0263C;
font-size: 24px;
font-weight: bold;
}
#apDiv6 {
position: absolute;
width:259px;
height:300px;
z-index:6;
left: 431px;
top: 387px;
}

bazz
Mar 18th, 2010, 03:01 AM
Y'know; you have already answered your question. ;)

If you are going to (wrongly - as you said) use tables for the structure of your page, you ain't going to need divs.

To fix your problems, you are best to write semantic code (get rid of tables except for tabular data ), and to make sure it validates at validator.w3.org.

bazz