...

View Full Version : Positioning DIV within centered body tag



luke85
05-10-2011, 10:35 AM
Hi peeps,

I'm relatively new to coding, so please be gentle.

How do I position a div tag within the body tag of the following code? For example, if I want a div tag to be positioned 50px to the left and 50px to the right of the body tag (which is centered), how do I make this happen? Currently, I know how to position div tags in relation to the browser window, but am struggling to figure out how to position it in relation to the centered body tag.

Thanks in advance!



<html>
<head>
<title>Mistral Cigale</title>
<style type="text/css">
<!--
body{text-align:center;}
div{width:950px;height:1000px;background-color:red;margin:0 auto;}
-->
</style>
</head>

<body>
<div></div>
</body>
</html>

abduraooft
05-10-2011, 10:56 AM
<!DOCTYPE html>
<html>
<head>
<title>Mistral Cigale</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{text-align:center;}
#wrap{
padding:0 50px;
}
#wrap div{height:1000px;background-color:red;}
</style>
</head>

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

luke85
05-10-2011, 11:19 AM
Hi abduraooft!

Thanks for the reply!

However, as I'm still a 'noob' to the world of coding, I'm still struggling as to what CSS code I should be using for the DIV that goes inside the 'wrap' DIV.

Currently I have:


<style type="text/css">
#content{
position:absolute;
left: 50px;
width:100px;
top: 50px;
height: 150px;
}
</style>

<div id="content"></div>

However, this doesn't work for me.

Sorry for being a nuisance.:o

luke85
05-10-2011, 11:59 AM
My code, at the moment, is below. But that is obviously wrong. Can you help me fix the code please?


<!DOCTYPE html>
<html>
<head>
<title>Mistral Cigale</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{text-align:center;}
#wrap{
padding:0 50px;
}
#wrap div{height:1000px;background-color:red;}

#content{
position:absolute;
left: 0px;
top: 80px;
height: 150px;
}
</style>
</head>

<body>
<div id="wrap">
<div id="content">fff</div>
</div>
</body>
</html>

abduraooft
05-10-2011, 12:00 PM
However, this doesn't work for me.
That's not the way to achieve your goal.

Have you tested the code in my above post? Anything wrong with that?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum