HTML Forum

**rareillusions** · 11-09-2007, 10:48 PM

I just started into web design, and I'm trying to center a layout with div layers, but I want the div layers to use absolute positioning on the layout, while still being centered.. but it's not working... help?

**joder** · 11-09-2007, 11:09 PM

Oh the horrors, I mean fun, of absolute positioning.

It's real easy to help you since all problems are the same. Providing a link or code would just hinder us.

**vangogh** · 11-10-2007, 12:02 AM

You won't be able to center something with absolute positioning beyond one screen resolution. When you absolutely position something you are telling it to always be in the exact same place no matter what.

You can use trial and error to position something in the center at one resolution, but as soon as you change resolution it won't be centered any more.

A better to center a layout horizontally on the screen is to wrap a div around everything.

<body>
<div id="wrapper">
the rest of your code here
</div>
</body>

and then use css to center it

div#wrapper {width:760px; margin: 0 auto}

The width is up to you, but you must specify a width. You can use %, em, px or any other valid unit of measurement, but you must use a width.

You only need to specify a margin-left and a margin-right and both need to be set to auto. I generally use the shortcut as I did above.

**rareillusions** · 11-10-2007, 09:30 AM

Thanks for your help, I'll try it

**joder** · 11-10-2007, 11:25 AM

But your probably going to have more than one column. If you need more help just post the code and we will be glad to offer help

**xprmnt** · 12:02 PM

As vangogh said no way to center position:absolute; elements (unless you want to use javascript !?!?)

... you can position the main element in the center and then you can absolute position the rest of the elements inside it and their positioning will be relative to that main element ...

**rareillusions** · 11-10-2007, 11:59 AM

that's what I want to do!! how do i do that?

**LadynRed** · 11-10-2007, 05:41 PM

Quote:

you can position the main element in the center and then you can absolute position the rest of the elements inside it and their positioning will be relative to that main element

BUT - ONLY if you set your main element to position:relative, otherwise any positioned elements INSIDE it would still be positioned relative to the BODY.

**vangogh** · 11-10-2007, 07:55 PM

rareillusions do what I suggested above, but add position: relative to the wrapper div. Then you should be able to position things inside it that will use the wrapper div as the origin for your positioning.

**xprmnt** · 11-10-2007, 08:33 PM

Yes of course LadyNred

rareillusions
try this sample code: (as VanGogh describes but with different approach to centering since I want vertical centering also)

Quote:

<html>
<head><title> Content relative to center </title>
<style>
body,html { height:100%;}
#wrapper{
position:relative;
border:1px solid red;
width: 300px;
margin-left:-150px;
left:50%;
height: 200px;
margin-top:-100px;
top:50%;
}
#one {
position: absolute;
top: -100px;
left:0px;
height: 30px;
width: 30px;
background-color: orange;
}
</style>
</head>
<body>

<div id="wrapper">
wrapper
<div id="one">one</div>
</div>

</body>
</html>

just remember:

this is not a "perfect center" a distance from top not always the same as the distance from bottom edge of the browser but I think its the best one can get with just css ...

in wrapper css
margin-left = - width/2 and
margin-top = - height/2

**rareillusions** · 09:49 AM

So, if i put position:relative in the wrapper css, would I just put the postion I want it in the wrapper text too or make a different place like xprmnt? and if I do that, would I use absolute postioning or would I use the margins like xprmnt?

Ok I tried it, and neither way worked, here's my css code

Quote:

div#wrapper {width:800px; margin: 0 auto
position: relative
margin-left:-150px;
left:50%;}
div#updates {position: absolute;
top: 10px;
left:0px;
width: 240px;}
div#sidebar {position: absolute;
top: 400px;
left:0px;
width: 180px;}
div#main {position: absolute;
top: 400px;
left:180px;
width: 300px;}

**LadynRed** · 11-11-2007, 10:03 AM

It is not a good idea to use absolute positioning. It removes the elements from the document flow and IE6 (especially) has some nasty bugs related to absolute positioning.

You're much better off avoiding positioning like that and use floats and the normal document flow, the position only when absolutely necessary.

**rareillusions** · 11-11-2007, 04:31 PM

But I have no idea on how to do that, so right now I'm going to stick with this until I get more advanced

**LadynRed** · 11-12-2007, 09:22 AM

You don't need advanced css to center a page, and you'll find that using the normal document flow is just easier - it's like swimming WITH the current as opposed to swimming AGAINST it.

You want to center a page ? It's easy:
http://www.simplebits.com/notebook/2...centering.html

or
http://css-discuss.incutio.com/?page...ngBlockElement

And for learning about the different types of layouts:
http://css-discuss.incutio.com/?page=CssLayouts

**xprmnt** · 11-13-2007, 03:31 AM

Quote:

Originally Posted by rareillusions

So, if i put position:relative in the wrapper css, would I just put the postion I want it in the wrapper text too or make a different place like xprmnt? and if I do that, would I use absolute postioning or would I use the margins like xprmnt?

Ok I tried it, and neither way worked, here's my css code

The code I posted was actually tested in IE6,7 Firefox 2, Opera 9 and IT DOES WORK ...

The code effectivelly puts a big square block in the middle and a smaller one RELATIVE to that ...

what did you want it to do ??? maybe I misunderstood ...
,

**rareillusions** · 11-16-2007, 05:26 PM

I think your telling me the right way,I think it's just all messed up.

Here's the first. With this, you can still see the header picture, but all the text is pushed down, and won't move up...
P.s. Both codes really aren't as long as they look, and there are some missing HTML codes, but I'll add those later

Quote:

And here's the other code where you can't see the picture, but the text is in the right place. I'll red the code that I removed

Quote:

Thanks for the help, and I'm also have the background repeat enough on the top and bottom

**xprmnt** · 11-19-2007, 04:11 AM

RareIllusions

consider fixing some of the html wrong doings in your code

lots of the tags are misplaced and some are orphaned

consider using something like this as a skeleton for you html pages

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> title of Document </TITLE>
<META NAME="Generator" CONTENT="">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">



</HEAD>

<BODY>



</BODY>
</HTML>

- you incorrectly did not include opening <html> tag and <head></head> section

- there are some </td> </tr> all the way down that should not be there

- your <center></center> tags should be inside the <body></body>
and not wrapping around the opening <body>
I would not use <center> actually since its obsolete/deprecated

- you ideally should not use the same id for more than one element
(here you are using it 3 times "wrapper")

and to tell you the truth I am not quite sure of what you are trying to accomplish with the code above ... maybe you should explain to us when you post again

but if you just want to center the content horizontally all you need is VanGogh's suggestion or this in your <style> tags

Quote:

body {
margin: 0px auto;
width: 760px;
}

**audiomad** · 11-19-2007, 04:34 AM

you can use %'s set it left = 10% width = 80%

**rareillusions** · 11-21-2007, 02:00 PM

i want to position my text in the right places while have a background picture repeating with the main text but keeping everything centered

**xprmnt** · 11-21-2007, 03:25 PM

I think you should focus on each one seperatelly instead of trying to accomplish all at once ... you description is still somewhat confusing ...

if you had followed VanGogh's instructions then you would be there already

try now a more complete example

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> title of document </title>
<meta name="generator" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">

<style>
div#wrapper {
background: url(images/image.jpg);
width:760px;
margin: 0 auto
}

</style>
</head>

<body>
<div id="wrapper">
your text your text your text your text your text your text
your text your text your text your text your text your text
your text your text your text your text your text your text
your text your text your text your text your text your text
your text your text your text your text your text your text
your text your text your text your text your text your text
your text your text your text your text your text your text

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

only then come back for more questions

you can also consider learning the basics from w3schools.com HTML/CSS tutorials
before anything else ....

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!