[SOLVED] simple layout problem

saltedm8 · May 1st, 2008, 13:00

I am building a template, and i am stumped with this

please look at attached image 2

that is what i have here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin: 0 auto;
    width:960px;
    height:200px;
    overflow:auto;
}

#container {
    margin: 0 auto;
    width:960px;
    overflow:auto;

}

#left {
    float: left;
    width:220px;
    height:400px;
    clear:left;
    margin: 15px 8px 3px 0;
}

#centre {
    float: left;
    width:504px;
    height:500px;    
    margin: 0 0 3px 0;
}

#right {
    float: right;
    width:220px;
    height:400px;    
    margin: 15px 0 3px 8px;
}

#footer {
    margin: 0 auto;
    width:960px;
    height:90px;
    margin-top: 10px;
    margin-bottom:5px;

}

#menu { float: left;
        width: 960px;
        height:50px; 
-->
</style>
</head>

<body>
<div id="header">
<div id="menu"></div>
</div>
<div id="container">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>

</div>
<div id="footer"></div>
</body>
</html>

what i want is image 1

but i cant seem to get the centre float to overlap the header, if i put in lets say -30px it only underlaps ( hope that makes sence )

anyone know what the trick is ? thank you

welshstew · May 1st, 2008, 13:20

try setting a z-index of 10 on it

saltedm8 · May 1st, 2008, 13:29

sorry mate i have tried that one, does not work

dab42pat · May 1st, 2008, 16:18

Give this a try.

Its absolute positioning , not great i Know.

HTML: Select all

#centre {
    
    width:504px;
    height:500px;
    margin-left:227px;    
   margin-top:118px;
   position:absolute;
     
}

Pat

saltedm8 · May 1st, 2008, 17:03

i really wanted to avoid absolutes because the layout is fluid, and it will mess up as soon as anyone has a different size screen as my own comes along - due to margin: 0 auto;

dab42pat · May 1st, 2008, 17:39

Yep point taken. Give this a try.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin: 0 auto;
    width:960px;
    height:200px;
    overflow:auto;
    border:#000000 thin solid;
    z-index:1;
}

#container {
    margin: 0 auto;
    width:960px;
    overflow:auto;
    

}

#left {
    float: left;
    width:220px;
    height:400px;
    clear:left;
    margin: 15px 8px 3px 0;
    border:#000000 thin solid;
}

#centre {
    float: left;
    width:504px;
    height:500px;    
    margin-top: -50px; 
    border:#000000 thin solid;
    z-index:2;
}

#right {
    float: right;
    width:220px;
    height:400px;    
    margin: 15px 0 3px 8px;
    border:#000000 thin solid;
}

#footer {
    margin: 0 auto;
    width:960px;
    height:90px;
    margin-top: 10px;
    margin-bottom:5px;
    border:#000000 thin solid;

}

#menu { float: left;
        width: 960px;
        height:50px;
        } 
-->
</style>
</head>

<body><div id="container">
<div id="header">
<div id="menu"></div>
</div>

<div id="left"></div>
<div id="centre">grttyujygujkygu</div>
<div id="right"></div>

</div>
<div id="footer"></div>
</body>
</html>

Something like this may solve your problem.

Pat

saltedm8 · May 1st, 2008, 17:48

close, but i now have scroll bars all over whenever i try to correct the layout lol, ( right div has dropped )

dab42pat · May 1st, 2008, 17:59

Ok round 3

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin: 0 auto;
    width:965px;
    height:200px;
    
    border:#000000 thin solid;
    z-index:1;
}

#container {
    margin: 0 auto;
    width:970px;
    overflow:hidden;
    

}

#left {
    float: left;
    width:220px;
    height:400px;
    clear:left;
    margin: 15px 8px 3px 0;
    border:#000000 thin solid;
}

#centre {
    float: left;
    width:504px;
    height:500px;    
    margin-top: -85px; 
    border:#000000 thin solid;
    z-index:2;
}

#right {
    float: right;
    width:220px;
    height:400px;    
    margin: 15px 0 3px 8px;
    border:#000000 thin solid;
}

#footer {
    margin: 0 auto;
    width:965px;
    height:90px;
    margin-top: 10px;
    margin-bottom:5px;
    border:#000000 thin solid;

}

#menu { float: left;
        width: 960px;
        height:50px;
        } 
-->
</style>
</head>

<body><div id="container">
<div id="header">
<div id="menu"></div>
</div>

<div id="left"></div>
<div id="centre">grttyujygujkygu</div>
<div id="right"></div>

</div>
<div id="footer"></div>
</body>
</html>

saltedm8 · May 1st, 2008, 18:04

congrats, looks good to me, thank you, nice one

Oops, spoke too soon, ie issue, right div is dropped

Marc · May 2nd, 2008, 07:13

Have you got this hosted anywhere.. hehe! Call me lazy or what?!

welshstew · May 2nd, 2008, 07:50

Quote:

Originally Posted by saltedm8

congrats, looks good to me, thank you, nice one

Oops, spoke too soon, ie issue, right div is dropped

I think that is due to the borders being added
try this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin: 0 auto;
    width:965px;
    height:200px;
    
    background-color:red;
    z-index:1;
}

#container {
    margin: 0 auto;
    width:970px;
    overflow:hidden;
    

}

#left {
    float: left;
    width:220px;
    height:400px;
    clear:left;
    margin: 15px 8px 3px 0;
    background-color:green;
}

#centre {
    float: left;
    width:504px;
    height:500px;    
    margin-top: -85px; 
    background-color:blue;
    z-index:2;
}

#right {
    float: right;
    width:220px;
    height:400px;    
    margin: 15px 0 3px 8px;
    background-color:black;
}

#footer {
    margin: 0 auto;
    width:965px;
    height:90px;
    margin-top: 10px;
    margin-bottom:5px;
    background-color: yellow;

}

#menu { float: left;
        width: 960px;
        height:50px;
        } 
-->
</style>
</head>

<body><div id="container">
<div id="header">
<div id="menu"></div>
</div>

<div id="left"></div>
<div id="centre">grttyujygujkygu</div>
<div id="right"></div>

</div>
<div id="footer"></div>
</body>
</html>

saltedm8 · May 2nd, 2008, 10:40

that did it, thanks mate

dab42pat · May 2nd, 2008, 15:23

oops, added the borders to see where things were. Forgot to remove them.

saltedm8 · May 2nd, 2008, 18:02

lol, sorted now, thanks