Jump to content

a centered main div skeleton/template


martins

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.

 

Archived

This topic is now archived and is closed to further replies.

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