...

View Full Version : Positioning <div> layers...



bonzovt
05-18-2007, 04:22 AM
I'm fairly new to coding with with css and layers. Haven't done much design recently and am coming out of the ice age with some of this css stuff. I am trying to create a site that has two boxes...one that is about 700px wide and 500px tall, and a smaller one that sits inside of it. I want both to be centered in the screen regardless of the resolution (not too worried about anything below 1024x768). So the second box would be centered inside the first, which is centered on the screen.

What is the best way to do this?? Am I allowed to use percentages in the top and left properties for a div? Or is there another tag I would need to use? Thanks...

smalldog
05-18-2007, 08:44 AM
Hi bonzovt,

try this code:




<style>
body {text-align: center}
#div1 {border:1px dashed red; text-align:left; margin:0 auto; width:700px; height:500px;}
#div2 {border:1px dashed orange; text-align:left; margin-left:175px; width:350px; height:250px;}
</style>

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

bonzovt
05-19-2007, 04:18 AM
ok, that worked for centering width wise. i am also going to try centering horizontally, so that i everything will be completely centered in the screen...especially at higher resolutions.

i start by creating a css table that is 100% the width and height of the screen, and then valign=middle the one row. is that not the best way to do this? is using one table cell not the best way to do this?

i have an image that is a 'title' for the page with links on it, and want the rectangle within a rectangle centered within the other below the title image. i'm thinking that i should be focusing on <div>'s here, but the only way i can think of doing it is treating the whole page as one table cell.

probably just css ignorance...

CoNt3MpT
05-19-2007, 05:06 AM
margin: auto;

_Aerospace_Eng_
05-19-2007, 08:58 AM
ok, that worked for centering width wise. i am also going to try centering horizontally, so that i everything will be completely centered in the screen...especially at higher resolutions.

i start by creating a css table that is 100% the width and height of the screen, and then valign=middle the one row. is that not the best way to do this? is using one table cell not the best way to do this?

i have an image that is a 'title' for the page with links on it, and want the rectangle within a rectangle centered within the other below the title image. i'm thinking that i should be focusing on <div>'s here, but the only way i can think of doing it is treating the whole page as one table cell.

probably just css ignorance...

A table is NOT the way to go here. Get the idea out of your head that everything requires a table. Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Centered Vertically and Horizontally</title>
<style type="text/css">
html, body {
height:100%; /*we need this so #container can have a height of 100%*/
margin:0;
padding:0;
}
#container { /*this allows the box to be visible on the screen at all times, without it #div1 would start moving off the viewport to the left*/
width:702px;
position:relative; /*this allows us to control #div1 because the nearest relative element is used as a reference*/
margin:auto;
height:100%; /*without this #div1 doesn't know what 50% of #container is since no height is set*/
}
#div1 {
border:1px dashed red;
margin:auto;
width:700px;
height:500px;
position:absolute; /*in conjunction with the below top, left, margin-top, and margin-left allows us to center this both horizontally and verticall*/
top:50%; /*this doesn't change*/
left:50%; /*this doesn't change*/
margin-top:-250px; /*this is half the height*/
margin-left:-350px; /*this is half the width*/
}
#div2 {
border:1px dashed orange;
width:350px;
height:250px;
margin:125px auto 0; /*used to center vertically and horizontally in #div1, content can only go into #div2 or layout will break*/
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<div id="div2"></div>
</div>
</div>
</body>
</html>

@Contempt thats not going to do anything vertically.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum