/    Sign up×
Community /Pin to ProfileBookmark

DIV layers – screen width problem…

Copy linkTweet thisAlerts:
Aug 31.2005

Hi, im quite new to useing div layers for laying out a website design, im tring to work out how to always get the div layers centralised, because: a smaller window will position the layout too far to the right and not in the centre of the window.
Before, i have used tables to lay things out and ive just centred the whole table but how do i do this with div layers?

Thanks for any help. ?

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@rch10007Aug 31.2005 — div layers are just a way to seperate types of data on your page. For example, you'd have a div for the header, nav, body, footer,...

now let's say you want everything in the center of the page and you want the page 800px wide you need to wrap all your div's with one div whose function is to contain all the divs and center them.

something like:

<div id="whole_page">

<div id="header">

....so on

</div>

</div>

then your css would be something like:

#whole_page {

width: 800px;

position: absolute;

left: 50%;

left-margin: -400px;

}

.....so on....

so what the css #whole_page does is contain all the other divs in an area that is 800px wide where the left margin begins at 50% of the browsers window size using postion: absolute.

BUT you don't want the left margin to be over that far so you back it up -400px to put the contents within the whole_page div right in the middle of the browser window. -400px is half the width of the 800px container so it moves the left margin over so the whole thing is int he middle.

hope this helps, this question has been answered alot so you may want to search for "center page" in the CSS section.
Copy linkTweet thisAlerts:
@The_Little_GuyAug 31.2005 — what if the width is 1024px? How would you make a page that would be for 1024 and 800? Not all people use 1024, and not all people use 800, so how would you make it, so it looks basically the same on both resolutions?
Copy linkTweet thisAlerts:
@rch10007Aug 31.2005 — so you want the page to strecth no matter what resolution? you aren't looking for a fixed width?
Copy linkTweet thisAlerts:
@The_Little_GuyAug 31.2005 — exactly
Copy linkTweet thisAlerts:
@james_d_kellyauthorAug 31.2005 — Hi, thanks for the code its just what i need. however ive tested it and it all works apart from it is still too far to the right suggesting the [B]left-margin: -400px[/B] isnt working, why?, am i missing something? ?
Copy linkTweet thisAlerts:
@rch10007Aug 31.2005 — post your code
Copy linkTweet thisAlerts:
@james_d_kellyauthorAug 31.2005 — This is wot ive got (just test code not for a real purpose).

<style>

#whole_page {

width: 600px;

left: 50%;

left-margin: -300px;

position: absolute;

background-color: black;

}

#layer1 {

background-color:green;

}

</style>

<div id="whole_page">

<p align="center"><font color="#FFFFFF">This is some text content.</font>

<div id="layer1">

<p align="center"><font color="#FTYGFF">some more text

</div>

</div>
Copy linkTweet thisAlerts:
@FangAug 31.2005 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;center contents&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
&lt;!--
body {
text-align:center;
}
#container {
margin:0 auto;
width:600px;
text-align:left;
}
#contents {border:1px solid red;}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div id="contents"&gt;
&lt;p&gt;centered contents&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@james_d_kellyauthorSep 01.2005 — Thanks that works great!

Thanks for all the help given ?
×

Success!

Help @james_d_kelly 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.27,
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,
)...