How to center my design

[forgottenglory]

Hi guys,

I'm new here and also new to CSS. I have always designed my static sites using tables and decided to give a go to CSS for a new site I'm working on. My problem at the moment is that my design looks centered on 1024 x 728 but flushed left at higher screen resolutions.

I have tried to read tuts online and I'm finding it hard to amend the code. Could somebody please have a look at the code and tell me what I need to amend so that the site is always centered irrespective of the screen resolution.

View the page HERE

Thanks

[mwinter]

For some reason, you seem to have tried to invent a new element when what you meant was to use the tag name as an identifier. Change <wrapper> and </wrapper> to <div id="wrapper"> and </div>, respectively.

For auto left and right margins to centre a block-level element, that element must have a width other than auto. Ideally, that width should be provided using the max-width property, which will allow the element to shrink within small viewports, but if that's not appropriate, the width property itself will do.

Hope that helps,
Mike

[forgottenglory]

OK I have changed the <WRAPPER> tag as you specified. Regarding the max-width property how would you write the code for that. Should the width be specified in % or px.

Also I've been told that I should not use position:absolute. How am I suppose to position page furniture if I do not use absolute?

Thanks for your help and please bear with me if my questions seem elementary as I am a total novice to CSS.

[mwinter]

Regarding the max-width property how would you write the code for that. Should the width be specified in % or px.

I said use max-width "ideally". The image you use at the top more-or-less forces use of the width property and px units. However, the site could be reworked a little to be more fluid. In that case, the em unit, which is proportional to font size, would be better.

On that subject, I'd like to point out that you cannot rely on a specific font size being used. The font size you've specified is too small to be comfortable for me, so my browser (Firefox) forces a minimum font size which leads to overflow of the text. If the design was fluid, this wouldn't matter as the various containers would resize as necessary.

Also I've been told that I should not use position:absolute. How am I suppose to position page furniture if I do not use absolute?

Absolute positioning needs to be used carefully, but it's not necessary to avoid it completely. The problem is that it can lead to brittle layouts: rigid, yet also easy to break. Floats are another common way of producing columns.

The links at the bottom right, for example, could be achieved by floating the images left, and adding a left margin to the text.

Whilst it's good that you've implemented presentation using CSS rather than presentation markup, you've lost semantics in the process. For instance, the text in the top left box consists of four paragraphs, but there's not a single paragraph (p) element in evidence. Similarly, each box has a heading (which I find difficult to read with such low contrast and small size) but there are no heading (hx) elements. You might want to consider that in future.

Mike