[SOLVED] simple layout problem

saltedm8 · #1 (**permalink**) 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 · #2 (**permalink**) May 1st, 2008, 13:20

try setting a z-index of 10 on it

saltedm8 · #3 (**permalink**) May 1st, 2008, 13:29

sorry mate i have tried that one, does not work

dab42pat · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 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 · #9 (**permalink**) 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 · #10 (**permalink**) May 2nd, 2008, 07:13

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

welshstew · #11 (**permalink**) 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 · #12 (**permalink**) May 2nd, 2008, 10:40

that did it, thanks mate

dab42pat · #13 (**permalink**) May 2nd, 2008, 15:23

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

saltedm8 · #14 (**permalink**) May 2nd, 2008, 18:02

lol, sorted now, thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] simple div problem	hhelen	Web Page Design	5	Apr 4th, 2008 14:56
[SOLVED] Simple Php Code Problem	longstand	PHP Forum	3	Oct 17th, 2007 21:02
[SOLVED] Accessibility problem with layout	Graisbeck	Web Page Design	7	Sep 3rd, 2007 11:16
Help needed to slice a site (Simple layout)	shorn	Starting Out	1	Apr 23rd, 2007 12:43
Simple 4 Box Layout	bluemeany	Web Page Design	8	Nov 30th, 2006 13:13

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] simple layout problem