PDA

View Full Version : Centering CSS Div Layers

mikie
08-07-2004, 07:19 AM
Hi, I would really like to use this layout, however, instead of it spanning an entire page, I'd really like it to be 750px wide and centered on the page. I have been working on this for hours and hours today and I simply can't get anywhere at all! Can anyone change the following code to make it only 750px wide and centered on the page? (So that it looks a bit like this (http://www.boston.com/news/globe/) page.)

Thanks in advance for any help. :)

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>
mikie
08-07-2004, 07:39 AM
I should add that I have an external CSS sheet, and I'm not sure if the center tags should be on the HTML or on the CSS!
weird girl
08-07-2004, 07:49 AM
Option a: Have <center> tags around your DIVs (in the HTML). Of course this would make everything aligned to the center so you would have to add text-align: left; if you wanted the DIV's text to align to the left..
Option b (Which I personally prefer :P): Add this in the css to the divs you want centered:
margin-left: auto;
margin-right: auto;

What you may want to do, is have a "wrapping div" ie:
#wrap {margin-left: auto;
margin-right: auto; }

And then have <div id="wrap"> before the rest of your coding (HTML) after the <body> tag, and of course, a closing </div> tag before the end of the body tag.

Hope I'm of some help.
mikie
08-07-2004, 07:56 AM
Option a: Have <center> tags around your DIVs (in the HTML). Of course this would make everything aligned to the center so you would have to add text-align: left; if you wanted the DIV's text to align to the left..
Option b (Which I personally prefer :P): Add this in the css to the divs you want centered:
margin-left: auto;
margin-right: auto;

I tried option A by putting <center> right after <body> and </center> right before </body> but it didn't work, and I'm not sure why.

If I did option B would I add those two tags to the #header, #left, and #center? ...or somewhere else on the sheet?

I'm new at this stuff and I've never taken a class... so take it easy on me! :D
weird girl
08-07-2004, 08:52 AM
I tried option A by putting <center> right after <body> and </center> right before </body> but it didn't work, and I'm not sure why.

If I did option B would I add those two tags to the #header, #left, and #center? ...or somewhere else on the sheet?

I'm new at this stuff and I've never taken a class... so take it easy on me! :D
I think the best bet would be to add another id.... such as wrap (in your css :P):

#wrap
{margin-left:auto;
margin-right: auto;
width: #px;}

And then have <div id="wrap"> right after the body tag, and a </div> right before the </body> tag.

Edit: You need to set a width for #wrap or else it wont be the width you want and in the center of the page. Change the bold red # to the width you want. :)
Hope that makes some sense. :P

Also, if you want to name the id something other than wrap, go ahead, just make sure the id and css match.
Combat Babe
08-07-2004, 08:59 AM
I'm new at this stuff and I've never taken a class... so take it easy on me! :D
Not to get off topic, but:

Actually, most people I meet that are really good with coding have never taken a class. A lot of people learn (like me) from online tutorials and/or viewing people's source code and figuring out what they did that they like.
BulbaGrrrl
08-07-2004, 09:19 AM
I have the exact same question so I'm trying to work through this...

anyways, is it possible to have div layers inside of a div layer? like how you can have a table in a table.
weird girl
08-07-2004, 09:21 AM
anyways, is it possible to have div layers inside of a div layer? like how you can have a table in a table.
Yes you can. :D
BulbaGrrrl
08-07-2004, 09:59 AM
I've got this part looking like:

#header
{margin: 0px;
padding: 0px;
height: 221px;
width: 776px;}

#left
{position: absolute;
top: 193px;
width: 115px;}

#center
{top: 0;
margin-left: 230px;
margin-right: 15px;}

#right
{position: absolute;
top: 219px;
width: 100px;}

#wrap
{margin-left:auto;
margin-right: auto;
width: 776px;}


And then I added the 'wrap' to the CSS but my site still looks like: http://www.harmonyanime.com . Is there something else I need to change in the CSS?
kittycat
08-07-2004, 06:42 PM
You may have to change some widths there to get it to look right.
Also, add float: left; to the div on the left and float: right; to the div on the right.
Add text-align: center; to the BODY CSS section because IE sucks and doesn't recognise the auto margins.
This also means that you may have to add text-align: left to your other divs to get them aligned the right way.
mikie
08-07-2004, 07:19 PM
I think the best bet would be to add another id.... such as wrap (in your css :P):

#wrap
{margin-left:auto;
margin-right: auto;
width: #px;}

And then have <div id="wrap"> right after the body tag, and a </div> right before the </body> tag.

Edit: You need to set a width for #wrap or else it wont be the width you want and in the center of the page. Change the bold red # to the width you want. :)
Hope that makes some sense. :P

Also, if you want to name the id something other than wrap, go ahead, just make sure the id and css match.

When I do exactly this, everything is still sucked to the left side of the screen. Does it matter if my positions are absolute?
mikie
08-07-2004, 08:20 PM
http://mwparenteau.net/veganism/veganism.html

That's my test page, in case it helps anyone!
Rosey
08-07-2004, 08:40 PM
yes it matters that you have absolutes because no matter what width you make things, it will always be where you told it to be.

you could do 2 things, use divs and specify the width of only 750px or whatever and put a <center> tag before the first div. or just use a table.
mikie
08-07-2004, 11:45 PM
yes it matters that you have absolutes because no matter what width you make things, it will always be where you told it to be.

you could do 2 things, use divs and specify the width of only 750px or whatever and put a <center> tag before the first div. or just use a table.
I don't want to use a table because I plan on having many pages and in the long run it would save me time to use CSS layers. Besides, I like to learn new things... it's just that these are really baffling me. :chicken:

And I have used divs and center tags and that doens't work either.

When I change the absolutes to relatives the 3 layers form a column and I want the second and third layer to be side by side. I can't figure out how to make that happen so I thought I could use absolutes and that doesn't do anything for me either.
kittycat
08-08-2004, 12:48 AM
Remove the absolute positioning and try the suggestions I included in my post above.
Also you need to fix up the body section of your CSS by removing all the excess { and }