...

View Full Version : centered div layer(s)



hog_mus_stream
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
http://i44.tinypic.com/8z1qxe.png

my wish:
http://i40.tinypic.com/2hpock2.png

---------------

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;
width:100%;
}
</style>





<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>
<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>
</div>
</div>


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

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

Excavator
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">
<head>
<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;
}
</style>
</head>
<body>
<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>
</body>
</html>


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

hog_mus_stream
05-04-2009, 09:15 AM
wow

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 :)

abduraooft
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum