/    Sign up×
Community /Pin to ProfileBookmark

Centering content for diff screen resolutions

Copy linkTweet thisAlerts:
Feb 07.2006

Hi guys..

I ‘ve started designing a site at an 800 x 600 screen resolution. However I was wondering if it would be possible to use css to centralise the content if it was viewed at a higher resolution. Looking at different sites it appears possible and no doubt it is probably quite simple.

Is it something to do with setting the body margins to auto?

Thanks

Dave ?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienFeb 07.2006 — There should be a sticky about this topic, since it's been gone over at least 1,000 times.

First, set the text alignment in the BODY tag to center. This centers the layout in IE-Win, most importantly in IE5-Win. Your layout then must be contained in one wrapper DIV. Give this DIV an ID, I usually give it an ID of "wrapper." Give the wrapper DIV the width you want for your page, realign the text left (or right for the Hebrew language ? ) and set the wrapper DIV's left and right margins to auto.

Internet Explorer incorrectly centers block level boxes using text-align: center. This property and value is only meant to center inline content within a block level box. The auto left and right margins are the Standard way for centering block level boxes within another block level box.
Copy linkTweet thisAlerts:
@bjoerndalenauthorFeb 09.2006 — Whoops....sorry to be the 1001st to ask this question.

Thanks for responding anyway. I did as you said and it didnt work. However if i added the position: relative; it worked.

body{background:red;

text-align:center;}

#wrapper {width: 750px;

text-align: left;

margin-left: auto;

margin-right: auto;

position:relative;}

So Thanks again and I will try not to ask silly questions in future.

? ?

Dave
Copy linkTweet thisAlerts:
@toicontienFeb 09.2006 — If relative positioning worked, you're either trying to compensate for an error in your HTML, or compensating for a quirky browser. The solution is three-fold:

  • 1. [url=http://www.alistapart.com/articles/doctype]Use a proper doctype to put browsers into Standards Compliance Mode.[/url]


  • 2. [url=http://validator.w3.org/]Validate your markup.[/url]


  • 3. [url=http://jigsaw.w3.org/css-validator/]Validate your CSS.[/url]


    • You shouldn't need relative positioning to get auto left and right margins to work. Following the three steps above ensures that you are at least accounting for a browser quirk and not your own mistake ?
    Copy linkTweet thisAlerts:
    @bjoerndalenauthorFeb 09.2006 — Thanks again.

    I will have to check those out.

    I must admit I only added the position:relative; because I came across it in a CSS book written by someone called Eric Meyer.

    I think I need more practice with CSS for sure but even at this early stage it appears a lot more adaptable than messing with tables etc...

    ? Dave.
    ×

    Success!

    Help @bjoerndalen spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...