How to show content div in center

Question

tqmd1 0 Junior Poster

12 Years Ago

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

web-design

7 Contributors
9 Replies
154 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by ba3ati

simplypixie 123 Posting Pro in Training

12 Years Ago

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 12 Years Ago by simplypixie because: n/a

Dragennd 12 Light Poster

12 Years Ago

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.

Dragennd 12 Light Poster

12 Years Ago

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 12 Years Ago by Dragennd because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tqmd1 0 Junior Poster · Answer 1 · 2011-12-02T11:48:17+00:00

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.

pearl20dec2011 -1 Newbie Poster · Answer 2 · 2011-12-05T12:31:31+00:00

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

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.

abyss776 1 Newbie Poster · Answer 3 · 2011-12-06T03:29:37+00:00

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.

Dragennd 12 Light Poster · Answer 4 · 2011-12-08T07:53:53+00:00

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;").

Dandello 8 Posting Whiz in Training · Answer 5 · 2011-12-08T08:44:04+00:00

You can center a block element with

margin:0 auto;

If you need top and bottom margins other than 0, just make those changes. Text within the block
is centered using

text-align:center;

For a good tutorial on div positioning, see http://www.barelyfitz.com/screencast/html-training/css/positioning/

ba3ati 0 Newbie Poster · Answer 6 · 2011-12-17T17:11:51+00:00

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