/    Sign up×
Community /Pin to ProfileBookmark

Web layout in the center off the screen?

Copy linkTweet thisAlerts:
Jun 08.2009

Hi!

I want to have my webpage in the center om the screen. Should I use plain HTML like <center> and then create different parts for text and images with <table>? But I would also like to use <div> with absolute positions and layers within this <table>!?

Is there a better way to create a layout that is in the center of the screen where I also can use <div> and so on?! I haven’t done much webdesign for some time and I would like to know new standards that are used today.

Appreciate som help!

Thanks!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ShortsJun 08.2009 — Yes, there is.

Don't use <center> or <table>

The way to go is having a container DIV something like:

[code=html]
...
<style type="text/css">
body { text-align:center; }
#container { margin:0 auto; position:relative; text-align:left; width:800px; }
</style>
</head>
<body>
<div id="container">PAGE</div>
...
[/code]

The margin:0 auto, 0 is for the top and bottom margin, auto is for left and right, that will position it in the middle. The position:relative will allow you to use position:absolute inside that DIV which will make it relative to it.

More ideas:

http://css.maxdesign.com.au/floatutorial/tutorial0802.htm
Copy linkTweet thisAlerts:
@pkngauthorJun 08.2009 — Interesting! Thanks! I'm going to try this and seek for more info about this.
Copy linkTweet thisAlerts:
@pkngauthorJun 09.2009 — EDIT: Ooops! Sorry, I wrote wrong </title>! Now it works in Inter Explorer!

Hi again!

I used the code above, but it didn't work in Internet Explorer 6!? It worked well in Firefox. I thought this simple CSS code would work i all browsers? What could be wrong and how should it be done tto work in all browsers? Thanks!

<html>

<title>test</test>

<head>

<style type="text/css">

body { text-align:center; }

#container { margin:50px auto; position:relative; text-align:right; width:800px; }

</style>

</head>

<body>

<div id="container">PAGE</div>

</body>

</html>
Copy linkTweet thisAlerts:
@ShortsJun 09.2009 — Hehe, awesome. Good to hear too.
×

Success!

Help @pkng 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...