0

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>

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

7
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by ba3ati
0

Try these changes:

body	{
  padding:0;
  margin:0;
	}
#content	{
	width:500px;
        height:600px;
        margin: 0 auto;
	color:red;
        background:#e3eeff;
	padding:10px;
        border:1px solid green;
	}

Edited by simplypixie: n/a

0

Now I am using these codes

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

Now content div is in center but other dives are not in content div.

How to put other dives in CONTENT div?


Other dives must move with content div.

Attachments content.jpg 35.24 KB
0

The div's within the big div cannot be absolute. They have to be relative or they wont center based on what is above them. You might also try doing "position: inherit;" that will tell the layers to copy the parent layer and that should fix the problem.

A little bit of info for you on positions:
- Absolute positions are designed to start at the top left of the page with inherit tags of "top: 0; left: 0;".
- Relative positions are a little different in that they can change locations based on their surroundings.
- Static positions are just that, static. They stay in the same location (roughly) when the page moves and will not differ from their location once set.
- Inherit positions pull their locations from the parent layer. Since it pulls from the parent layer it will assume "top: 0; left: 0;" if there is no designated parent layer on the webpage.

Hope this helps with your problem.

-2

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>

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

The simplest option is to put the <div> tag in <center> tag and it would automatically make it aligned as center :)

Votes + Comments
The simplest solution isn't always the best. In this case: using deprecated markup for a solution simply lacks portability and is not in agreement with the current standards, which makes it neither.
0

It will not center unless the layer is "position: relative;".
This is very important to note because an absolutely positioned layer will not center based on the <center></center> tag alone.

Edited by Dragennd: n/a

0

Firstly, zoidmaster is right. Your div's cannot be "position: absolute" or else they will ignore your content div. I believe you can either set it to "position: relative" or leave out position entirely.

Also, in light of pearl20dec2011's suggestion, I would like to point out that the <center> tag is deprecated and should not be used under any circumstances.

0

Firstly, zoidmaster is right. Your div's cannot be "position: absolute" or else they will ignore your content div. I believe you can either set it to "position: relative" or leave out position entirely.

Also, in light of pearl20dec2011's suggestion, I would like to point out that the <center> tag is deprecated and should not be used under any circumstances.

Just wanna throw in my 2 cents (again)...
It is highly reccomended, if not mandatory, to use the position tag in your <div> tags so that the webpage knows where to place its content. As for the <center> tag, it might be depreciated but I still believe it is one of the best ways to center your content short of doing the long bit of code for a table. If you know of a more efficient way to center content please post it (aside from using css to center text "text-align: center;").

0

just use {position:relative} for the #content div the other divs will be positioned according to it.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.