Question on relative positioning of <div>s

[HazySmoke)345]

I designed a webpage under 800x600 resolution. I used lots of <div> tags and used absolute positioning. It looks wonderful under that resolution.

However, when I switched to 1024x768 resolution, the webpage looks horrendous because all its contents were on the left and there's a HUGE blank space on the right.

Is it possible to make the divisions display in the centre instead?

[Amailer]

Make a main div, put all your content in it and for that div give it:

css:

margin-right: auto; margin-left: auto;

That should center your content. You can do it for each individual section too (header, body, footer etc) up to you :/

[HazySmoke)345]

No luck.

code:

div{         border: 1px solid black;         background-color: #ffd2a6;         margin-right: auto;         margin-left: auto;         padding: 0px; } #title{         width: 750px;         height: 160px; } ... <div id = "title"> ...

That's what I wrote... and my Internet explorer is still justifying it to the left.

[Amailer]

Don't do it for all the divs, do it for one main div id that encompasses the rest of the divs you want centered example:

HTML:

<div id="main">   <div id="top"> </div> <div id="middle"> </div> <div id="bottom"> </div> </div>

Then your css for #main would have:

css:

#main { margin-right: auto; margin-left: auto; }

[Tony]

Also, something like 5% use 800x600 resolution

Though then again designing for any particular resolution assumes the full-screen browser window.

Liquid CSS design for the win! (using relative widths)

[HazySmoke)345]

Thanks so much, Amailer. You helped me so much so far. You deserve some karma applauds.

[Amailer]

Thanks