Keep web page centered?!

Hello,

I have created a web page and everything is positioned the way I want, however, when I increase the size of the browsers window all the content stays put. I would like it to stay centered as the window increases/decreases.

The page consists of a few images and paragraphs.
I used absolute positioning, with distances in pixels.

Please help me figure this out. Thank you.

My navigation list is centered along with any paragraphs.

You would need to set text-align:left on the parent element to counteract the text-align:center on the body assuming you are using the methods already mentioned above.

We actually have a very old faq that explains this :slight_smile:

Here’s one method, cribbed from CSS-Discuss. This assumes your wrapper is 500px wide; alter that value as needed.

body {
  text-align: center;
  min-width: 500px;
}
#wrapper {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

Should do the trick. There are, of course, other methods out there.

Welcome to SitePoint!

And that is your problem. Absolute positioning won’t let content flow around the screen, so remove that and try what Black Max suggested. See if that helps, and if not, please ask further. :slight_smile:

Ralph, it might be better for him to scrap the layout entirely and redo it as a liquid/elastic design, rather than just delete the “position: absolute” stuff and hope it hangs together, maybe perhaps? :slight_smile:

Edit: Absolute positioned layouts (okay, fixed layouts) do have a place in design. I don’t use them very often, and I don’t think you do either, but I don’t want Hattrick to think that they are verboten. A lot of successful sites use a fixed layout.

Quite so. I’ve stopped telling people to scrap their designs, though, as it is a bit depressing to hear, so I just give subtle hints.

Absolute positioned layouts (okay, fixed layouts) do have a place in design. I don’t use them very often, and I don’t think you do either, but I don’t want Hattrick to think that they are verboten. A lot of successful sites use a fixed layout.

AP layouts are certainly not verboten, but I’ve not seem many (if any) sites where other layout methods wouldn’t work better. AP elements don’t shift position in relation to others very well, making them very problematic. I only use them for small elements that ‘hang off’ the major elements.

Good work, Black Max.

If I might add, you dont even need a container div you can just apply a width value to body.

 
* {
    margin: 0;
    padding: 0; }
 
body { text-align: center; //IE5 Hack }
 
#container {
    text-align: left;
    width: value;
    margin: 0 auto; }
 

You’re still hacking for IE 5?? What’s next, support for the Commodore 64?

LOL, made me laugh, and great to see I am not the only one who remembers the awesome C64 !

HA HA!

If you looked at some of the previous code above, I wasn’t the only who support’s IE5 and yes I do support down to IE5.

Off Topic:

I always have to smile when I see German verbs, nouns, and adverbs elegantly sneaking their way into English sentences. I mean, it’s commonplace for Latin or French nouns or verbs defending their place within sentences, but German? Not so much. So that’s cool! :smiley: Not that this is of any significance at all. I’ll stop derailing the thread now.

Kohoutek, I’m an expert at derailing threads, don’t be embarrassed. :slight_smile:

I was going to ask Blake if he designed for the Amiga, but that would be derailing the derailing, and that makes my head hurt. :smiley: Blake, kudos to you for supporting IE5, but I’m damned if I’d do it. IE6 is enough to give me the shivering heebie-jeebies.

Ok sorry everyone but I am still a little bit confused. If my problem is using absolute positioning then what is the best way to position the elements of my site? Thanks to all of you in advance.

I think I got it but I am still have some problems within my site…

My navigation list is centered along with any paragraphs. I want them to be centered on the page, but the actual text to be flush left.

Russ Weakley is as knowledgeable as anyone; he wrote an excellent tutorial on building a liquid layout. (I won’t go into “liquid vs. elastic” here.) [URL=“http://www.netmag.co.uk/zine/develop-css/create-a-simple-liquid-layout”]This is an interesting take on using absolute positioning in liquid layouts.

Work your way through these and see if things make any more sense than they did before.

Edit: Can you post a link to your site (I understand it’s still in progress)? Or failing that, the site code (using the CODE dealie above)?

Ok sorry everyone but I am still a little bit confused. If my problem is using absolute positioning then what is the best way to position the elements of my site? Thanks to all of you in advance

Actually, we’re all running around and guessing what’s going on… we needz to see some codez! Our advice gets a lot better when we know where you’re starting at.

[ot]

I always have to smile when I see German verbs, nouns, and adverbs elegantly sneaking their way into English sentences. I mean, it’s commonplace for Latin or French nouns or verbs defending their place within sentences, but German? Not so much. So that’s cool!

Psssh, Engrish has always had a bunch of Germanic words. Forbidden -> verboden -> verboten. Ride rode ridden… where does that come from? Not the Romance languages! As far as I can tell, the parts of Engrish that are pure Engrish is the stuff developed on the island itself, words that can’t be traced to anywhere else, like “dog”. When the Normans invaded, they screwed with the spelling and caused the nobles to all want to speak French (and even verminkt word spellings like “comptroller” which is “controller” with extra fake letters inserted to make them “look more French”). Lawlz. You can really only claim true modern taking from German when it’s taking place of words Engrish didn’t have and use now, like schadenfreude.

It’s prolly the Dutch’s fault that people go UP and DOWN streets, call people UP and have MUGgy days, though.

Eyes Before Ease, lawlz.[/ot]

[ot]@ Stomme: Yes, but I think very little of what the Germanic tribes brought into the English language is still present in “modern” English. Indo-Germanic had more influence.The Romans are at fault! French or Italian is considered elegant or smart by so many people (I don’t get it, but hey). German and Dutch seem to be considered somewhat “harsh” and unsexy, for lack of a better word. This reminds me of Chaplin’s masterful parody of the German language in “The Dictator”. Pure gobbledygook and so good!

@Black Max: I followed your advice. If I get smacked on the head by Sitepoint, you know who’s to blame. :eye:
[/ot]

Off Topic:

Dutch is considered inelegant due to its sounding like someone trying to cough up a cat… with the “g/ch” sound… famous wartime shibboleth Scheveningen is not “sh” but “s+g”!

Off Topic:

Well, English is a Germanic language, despite all the Latin/French influences. English, German, Dutch etc all grew on the same ‘branch’, so to speak. As poes pointed out, forbidden/verboten &co are versions of the same word.

[ot]@ Ralph: I am aware of its history. (ref. post above) I don’t think I’ll find the term “Verboten” in an English dictionary or the term “Forbidden” in a German dictionary. That was my point rather than the fact that these languages share the same roots.

@ Stomme: I never really perceived it that way (lacking elegance). But then again, my hearing is used to those sounds.

I’m off to reading Javascript.
[/ot]