Jump to content

Recommended Posts

Hi all,

 

I am learning css positioning (relative, absolute, etc). I know that if a div is not in any container than it will treat the whole screen as its ancestor/container. How would I create a parent div to all. The whole page would actually be inside this div (which, say, should have the width of 1024px and should be centered on the screen regardless of the size of the monitor.

 

I hope it makes sense.

 

Thank you for your time.

 

martin

Link to comment
https://forums.phpfreaks.com/topic/205224-a-centered-main-div-skeletontemplate/
Share on other sites

If I understand you, this might help

The html would be

<body>
<div id="container">
Content here.
<!-- end #container --></div>
</body>

 

And the css would be

body {
margin: 0;
padding: 0;
text-align: center; 

}
#container {
width: 1024px;
margin: 0 auto;
text-align: left;
}

 

If this isn't what you're looking for, let me know.

 

Thank you. I've just tried it and it seems that it was what I wanted.

One question though: in body css there is text-align: center

I thought it would only apply to 'text' not a container like div? How is it so?

 

thanks again

 

text-align will work on any element. However, this text-align:center then aligning sub elements to the left is unnecessary. It was a hack for old browsers that people don't use anymore. This is all you need on your container:

 

margin:0 auto;

 

That will center it.

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.