View Full Version : centered div layer(s)

05-04-2009, 12:30 AM
i understand that this question came maybe million times
but i assure you all that i googled like idiot
compared my code with others and i dont have luck at all...
i started to learn about div layers because i wanted to throw away tabled layout...

so my problem is:
i have 3 DIV's, 1st is main that contain other 2
2nd is on the left side with content
3rd is on right side of 2nd
i just want that those div layers all be centered on any resolution
bigger than 1024x768

i made pictures of what i want if i sound stupid :P

- orange is main layer containing other 2
- blue & green are other 2

my wish:


this is my humble code, i tried to put some logic in it but no luck...

<style type="text/css">
body {
background-color: #CCCCCC;
margin-left: 0px;
margin-top: 0px;

.main_frame {
position: absolute;
top: 0px;
left: 0px;

<div class="main_frame">
<div style="position: absolute; top: 7px; left: 7px; width: 270px;">
<p>some text/link</p>
<p>another text/link</p>
<p>yet another text/link</p>
<div style="position: absolute; top: 7px; left: 280px; width: 600px;">
<p>some text/link</p>
<p>another text/link</p>
<p>yet another text/link</p>

some site recommended to put in body: text-align: center;
and for rest layers: text-align: left;
this didnt work

some site recommended to put layer(s) 50% from left
but this would only "push" my content far on right and align still would
not be centered...

then i tried on stupid way:
make table with 1 row, set its align to centered and put all div's inside
but then i had trouble with positioning left and right layers where i wanted
(since everything inside table is i guess under tabular rules and is placed in center of table...)

any help would be apreciated :D

05-04-2009, 01:32 AM
no luck :/
it still resizes toward left upper corner

05-04-2009, 03:09 AM
Hello hog_mus_tream,
Putting margin:0 auto; on the body isn't going to do much for you.
To center an element we need 3 things:

a DocType
an element with a width
that elements left and right margins set to auto

like I've done with your #main_frame here -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #ccc;
text-align: center;
* { /*this zeros out default margin and padding*/
margin: 0;
padding: 0;
border: none;
#main_frame {
width: 880px; /*this is the total width of left and right columns*/
margin: 0 auto; /*centers #main_frame*/
#left_col {
width: 270px;
float: left;
#right_col {
margin: 0 0 0 280px;
<div id="main_frame">
<div id="left_col">
<p>some text/link</p>
<p>another text/link</p>
<p>yet another text/link</p>
<!--end left_col--></div>
<div id="right_col">
<p>some text/link</p>
<p>another text/link</p>
<p>yet another text/link</p>
<!--end right_col--></div>
<!--end main_frame--></div>

Notice I've also done away with your inline styles and absolute positioning.
Now you can experiment with text-align:left; on your columns.

05-04-2009, 09:15 AM

thank you so much, it works very nice !

i must admit that it uses (div positioning) a bit weird logic
too bad that w3c can't implement something more simple (like align: center; ) tag for divs :P

thanks again :)

05-04-2009, 10:11 AM
html, body {
font: 14px "Comic Sans MS";
background: #ccc;
text-align: center;
} FYI, the above text-align:center is not required, if you are not concerned about the very old browsers like IE5 and previous versions.