Center Fixed Width Wrapper

Forum Moderators: not2easy

Message Too Old, No Replies

Center Fixed Width Wrapper

snakesmum

3:05 am on Feb 4, 2011 (gmt 0)

Hello Everyone,

This is my first post here, so hope I get it right.

Have been writing a website using Kompozer, and it appears
to add far too much code.

What I'd like to do, is have the wrapper centered in the browser
page, no matter what size screen the user has. I can't seem to
get it right, and I'm sure that some of this code is surplus to
requirements.

This is the doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Here is what it comes up with when I fill in all the boxes:

#wrapper

{

border: 2px solid #003300;
background-attachment: fixed;
display: block;
width: 900px;
min-width: 900px;
max-width: 900px;
height: 1225px;
min-height: 1225px;
max-height: 1225px;
visibility: visible;
clear: both;
background-color: white;
margin-right: 10%;
margin-left: 10%;

}

What would I add to this to center the page, please?

Any advice appreciated, thanks

Jean

SevenCubed

4:20 am on Feb 4, 2011 (gmt 0)

Hi snakesmum and welcome to WebmasterWorld :)

Here is a potential solution. I've tried it in Firefox and IE and it works ok and also is valid CSS code.

#wrapper
{
margin:0 auto 0; <----------------- add this
border: 2px solid #003300;
background-attachment: fixed;
display: block;
width: 900px;
min-width: 900px;
max-width: 900px;
height: 1225px;
min-height: 1225px;
max-height: 1225px;
visibility: visible;
clear: both;
background-color: white;
margin-right: 10%; <------------- remove this
margin-left: 10%; <------------- remove this
}

Fotiman

5:08 am on Feb 4, 2011 (gmt 0)


body {
  text-align: center; /* For IE */
}
#wrapper {
  margin: 0 auto;
  text-align: left; /* Reset text alignment */
  width: 900px;
}

With the following markup:


<body>
  <div id="wrapper">
    This will be centered
  </div>
</body>

alt131

1:24 pm on Feb 4, 2011 (gmt 0)

Hi snakesmum - welcome to WebmasterWorld ;) - and thank you for posting nicely prepared code and a doctype

Kompozer isn't as bad as some editors, but you are quite right, there some surplus. You might consider:

#wrapper {
border: 2px solid #003300; /* extra-picky but it is possible to use the shorthand #030 */
background-attachment: fixed; /* only applies if there is a background-image so could be removed */
display: block; /* if #wrapper is a block element - like a div - it is display:block by default, so could be removed */
width: 900px;
/*min-width: 900px;
max-width: 900px; min- and max-width not required as you have declared a width */
height: 1225px;
/*min-height: 1225px;
max-height: 1225px; as for width - min- and max- not required */
visibility: visible; /* visibility is visible by default, so should not be required */
clear: both; /* whether this is required will depend on how the page is coded, but I suspect this isn't required either */
background-color: white;
/* margin-right: 10%;
margin-left: 10%; these are causing the issue you posted about - replace with margin:0 auto as suggested by previous posters */
}

@fotiman

body {
text-align: center; /* For IE */
}

Hi foti, I know I'm pedantic on this, but it is a pet peeve - only required for ie5.5 and below, and ie6 in quirks mode.

Fotiman

1:52 pm on Feb 4, 2011 (gmt 0)

@alt131, thanks for that clarification. It's one of those things that became habit long ago and I've always just included it. It's definitely time to drop that. Thanks for pointing it out. :)

alt131

2:32 pm on Feb 4, 2011 (gmt 0)

Foti - thanks for making a pet peeve sound positive - and delighted if it translates to something helpful ;)

@Jean
The side-discussion only applies to your code if you have to support really old browser versions - otherwise ignore it.

Plus, we've all assumed you want the page centred horizontally. Do correct us if you need vertical centring as you'll need additional code.

snakesmum

6:46 am on Feb 5, 2011 (gmt 0)

Hi Everyone,

Thanks so much for your swift responses - I have plenty of
ideas to work with there! :-)

I do only want the page centered vertically, so the answers
given were right.

The page is now centering as I want it.

I think the error which was causing the most trouble was
not having the HTML code written correctly.

Thanks once again, and I'm off to work on the page again.

Cheers
Jean