centered div layer(s)

hog_mus_stream · 05-03-2009, 11:30 PM

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

Code:

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

Code:

<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

hog_mus_stream · 05-04-2009, 12:32 AM

no luck :/
it still resizes toward left upper corner

Excavator · 05-04-2009, 02: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 -

Code:

<!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, 08: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, 09:11 AM

Code:

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.