...

View Full Version : Centering content



cooleo100d
02-10-2005, 03:14 AM
Hi,

I have a two column layout, and I'm trying to get the content box and the right column on the same line, which I was able to do. But on 1027 x 768 resolution, both columns shift all the way to the left of the page. How do I center these two columns? By the way, is there anything I can do to make the CSS cleaner, and am I doing the layout correctly? The css is in the same document as the html so it is easy to see.

Please check it out at: http://gamescool.com/SHS/index_2.html

Thanks for your help,
~David

rmedek
02-10-2005, 03:20 AM
From the HTML and CSS Frequently Asked Questions Sticky:

http://codingforums.com/showthread.php?p=182254#post182254
and
http://codingforums.com/showthread.php?p=182258#post182258

pixelpets
02-10-2005, 03:41 AM
i'd suggest using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can customly align everything on there

cooleo100d
02-10-2005, 03:55 AM
Hi,

I tried the margin: 0 auto, and text-align: middle on the body tag method and it doesn't seem to work.

Is there anything else I can do?

Thanks,
~David

rmedek
02-10-2005, 05:26 AM
Well, you can't use it on the <body> tag because the body is the whole document. See, everything that's in a block level element, like a <div> or a <h1> or a <ul> has space, padding, and margin. So let's say the body is something like 800px wide (the width of your browser screen, let's say). And you have a div that's 600px wide. If you give the div some margin:

div {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}

The browser will give the div no margins at the top and bottom, but give a 100px margin on the left and right-- because the margins are the same, it centers the "box." See how that works? An easier way to write the above code is:

div {
margin: 0 auto;
}

The first value is the top and bottom value and the second is the left and right. So to center everything on the page, wrap all your divs in a big container div and apply margins to that:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
#wrapper {
margin: 0 auto;
width: 600px;
height: 500px;
background: #eee;
border: solid 1px #ccc;
position: relative;
}

#left {
width: 200px;
height: 478px;
margin: 10px;
background: #fff;
border: solid 1px #ccc;
position: absolute;
left: 0;
}

#right {
width: 365px;
height: 478px;
margin: 10px;
background: #fff;
border: solid 1px #ccc;
position: absolute;
right: 0;
}
</style>

<body>
<div id="wrapper">
<div id="left">inside the wrapper</div>
<div id="right">also inside the wrapper</div>
</div>
</body>
</html>

Copy and paste this code into your browser and you'll see what I mean. Hope it helps,

Koobi
02-10-2005, 05:49 AM
You can use this same concept:
http://koobi-studio.com/gf/centerThis.htm


Hope it helps.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum