3 replies [Last post]
tqmd1
tqmd1's picture
Offline
Regular
Pakistan
Last seen: 1 year 2 weeks ago
Pakistan
Timezone: GMT+5
Joined: 2011-10-15
Posts: 15
Points: 31

Dear Sir,

I have following codes

<html><style type="text/css"> html	{	padding:0;margin:0 auto;	} body	{	padding:0;margin:0 auto;	}  #content	{	position:absolute;	width:500px;height:600px;	color:red;background:#e3eeff;	padding:10px;border:1px solid green;	}  #div_left	{	position:absolute;	width:200px;height:400px;left:20px;top:20px;	color:yellow;background:#e3eeff;	padding:10px;border:1px solid orange;	}  #div_right	{	position:absolute;	width:200px;height:400px;left:250px;top:20px;	color:red;background:#e3eeff;	padding:10px;border:1px solid blue;	}  </style> <body><div id="content"><div id="div_left">This is left div</div><div id="div_right">This is right div</div></div></body></html><html>
<style type="text/css">
 
html	{
	padding:0;margin:0 auto;
	}
 
body	{
	padding:0;margin:0 auto;
	}
 
 
#content	{
	position:absolute;
	width:500px;height:600px;
	color:red;background:#e3eeff;
	padding:10px;border:1px solid green;
	}
 
 
#div_left	{
	position:absolute;
	width:200px;height:400px;left:20px;top:20px;
	color:yellow;background:#e3eeff;
	padding:10px;border:1px solid orange;
	}
 
 
#div_right	{
	position:absolute;
	width:200px;height:400px;left:250px;top:20px;
	color:red;background:#e3eeff;
	padding:10px;border:1px solid blue;
	}
 
 
</style>
 
<body>
<div id="content">
<div id="div_left">This is left div</div>
<div id="div_right">This is right div</div>
</div>
</body>
</html>

My question is how to display my content div in center (page center) with all screen resolutions i.e
1024x768
1152x864
1280x600
1280x700
1280x768
1280x790 and so on

Please help

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 39 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9259
Points: 3265

First, absolute positioning

First, absolute positioning has gotchas that the inexperienced are going to stir up. That is probably the most difficult layout method to implement, and the most fragile. Changes in the content almost always require changing all the offset values. Do yourself a favor; forget you ever heard of the position property. Learn the other more robust layout methods first.

Go to the CSS Layout Generator, and let it develop a layout for you. Once you get a start on a more sane method, we can help you over any rough spots.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

prasad
Offline
newbie
Last seen: 2 years 46 weeks ago
Timezone: GMT+5.5
Joined: 2011-12-05
Posts: 7
Points: 7

Aligning div center

Absolute position is not necessary for #content div, instead use margin:0px auto;

Here is the full explanation of align div in the center.

thanks,

Bhuvani
Bhuvani's picture
Offline
Regular
Last seen: 1 year 31 weeks ago
Timezone: GMT+5.5
Joined: 2011-05-18
Posts: 16
Points: 16

Vertical centre an element of unknown height and width

Hi,

See below simple codes.

<!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=iso-8859-1" />
<title>Vertical centre an element of unknown height and width</title>
<style type="text/css">
html, body{margin:0; padding:0; height:100%; font:12px Arial, Helvetica, sans-serif; color:#666;}
.wrapper{display:table; height:100%; width:100%;}
.outer{display:table-cell; line-height:100%; vertical-align:middle;}
.content{margin:0 auto; width:460px; background:#e3eeff; padding:20px; line-height:22px; overflow:hidden;}
.left-sec, .right-sec{border:1px solid green; padding:7px 10px; float:left; width:198px;}
.left-sec{margin:0 20px 0 0;}
</style>
 
</head>
<body>
<div class="wrapper">
	<div class="outer">
		<div class="content">
        	<div class="left-sec">
            	Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here <br />Left content here
            </div>
            <div class="right-sec">
            	Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here <br />Right content here
            </div>
        </div>
	</div>
</div>
</body>
</html>