View Full Version : How to center my design using CSS

12-07-2006, 05:53 PM
Following the code that was generously provided by ahallicks can anybody tell me how to amend the css so as to ensure that my design is always centered on the screen irrespective of the screen resolution. At the moment my design looks centered on a 1024 x 768 but is flushed left on 1280 x 1024. Here is the code:

html {
padding: 0;
margin: 0;

body {
padding: 0;
margin: 0;

#wrapper {
margin: 0 auto;
width: (whatever);
height: auto;

#header {
background-image: (blah)
width: (blah);
height: (blah);
float: left;

#contenta {
background-image: (blah)
width: (blah);
height: (blah);
float: left;

#footer {
background-image: (blah)
width: (blah);
height: (blah);
float: left;

12-07-2006, 05:57 PM
Did you actually change the part where it said width: (whatever) on the #wrapper? For your layout to be centered it needs to have a defined width.

12-07-2006, 06:38 PM
At the moment it is zero. How do I know which width to specify as different screen resolutions will have different width for the design to display in the center?

I have only just started learning CSS so please bear with me if I'm asking elementary stuff.


12-07-2006, 07:03 PM
Well if you don't want a horizontal scrollbar on a 800x600 resolution at full screen your layout can't be wider than 780px but this leaves the rest of the screen for empty space. Ideally having a layout that is fluid is the best layout to have meaning it resizes in width to fit the users resolution.

12-07-2006, 10:09 PM
OK by fluid what I understand is that if I was designing using tables, I would specify the table size in % instead of pixels and use the <DIV align="center"> tag. So at whether viewed on 1024 or higher it will always be in the middle.

Remembering that I'm new to CSS (only started dabbling with it 2 days ago) how would code it in CSS using the code above. I did some research on w3schools.com and csszengarden.com but couldn't find anything that showed me how to position my design in the center. Basically the design is to be in the center of the screen with white space columns on both sides of the screen.

12-07-2006, 10:16 PM
Well first you would need to work on the fluid layout.

Once you've got that done you can give it a percentage width and margin:auto; will take care of the centering. You may want to look into min-width as well.

12-13-2006, 02:25 PM
Thanks for the link. I have read through the tuts and tried changing my code but nothing happened. Can you please have a look at my page HERE (http://www.forgottenglory.com/bab/index.html) and the code and tell me what is it I need to change so that the designed is always centered irrespective of the screen resolution. I am targeting 1024 x 768 and above.


12-13-2006, 03:22 PM
You can't just change a stylesheet and expect things to work. You will need to resize your graphics for the layout to work. You also can't make up your own tags which it seems like you did. I think you need to do more tutorials on basic html before you go any further.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>B & B France</title>
<link href="bedStyles.css" rel="stylesheet" type="text/css" />

<div id="wrapper">
<div id="header"></div>
<div id="welcomeBox"><span class="welcomeTxt">Chambre d'Hôtes et Maison Hôtes de qualité à l'accueil enthousiaste<BR/><BR/>

Séjourner en chambre d'hôtes, maison d'hôtes ou même table d'hôtes
une façon charmante de passer ses vacances en France et notre site
permet de retrouver les B&Bs soigneusement sélectionnés par une
de professionnels spécialisés dans ce type d'hébergement.<BR/><BR/>

Ainsi vous pouvez être sûr que les chambres d'hôtes
sélectionnés, représentent &quot;la crème de la crème&quot; comme disent nos amis anglais.

Bed & Breakfast France propose également un serveur vocal, de guides
utiles et s'assure que vous tiriez le meilleur profit de votre séjour.<BR/>

« En entrant, je connais déjà mes hôtes, j'ai senti l'ambiance et
style de l'accueil, je sais que je ne serai pas déçu. »
</span> </div>
<div id="languageBox"><SPAN class="languageTxt">Choississez le pays qui vous conviens le mieux pour avoir acces au B & B dans les pays respectifs.<BR/><BR/>
<IMG src="pictures/flags/usa.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=uk" class="roll" target="_blank">Etats Unis</A> - Anglais<BR/><BR/>

<IMG src="pictures/flags/unitedkingdom.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=uk" class="roll" target="_blank">Grande Bretagne</A> - Anglais<BR/><BR/>
<IMG src="pictures/flags/france.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=fr" class="roll" target="_blank">France</A> - Francais<BR/><BR/>
<IMG src="pictures/flags/germany.gif" /> <a href="http://www.bedbreak.com/default.asp?lng=de" class="roll" target="_blank">Allemagne</a> - Deutsch<BR/><BR/>
<IMG src="pictures/flags/italy.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=it" class="roll" target="_blank">Italie</A> - Italiano<BR/><BR/>

<IMG src="pictures/flags/spain.gif" /> <A href="http://www.bedbreak.com/default.asp?lng=es" class="roll" target="_blank">Espagne</A> - Castellano
<div id="contactBox"><span class="contactTxt">
Vous pouvez nous contacter par un des moyens suivants:<BR/><BR/>

<SPAN class="bold">Telephone:</SPAN><BR/>
01 34 19 9000<BR/><BR/>
<SPAN class="bold">Fax:</SPAN><BR/> 01 39 94 89 72<BR/><BR/>

<SPAN class="bold">Serveur Vocal:</SPAN><BR/> 0892 69 9000*<BR/>
*0,34€/minute à partir d'un poste fixe<BR/><BR/>
<SPAN class="bold">Email:</SPAN><BR/> bab@bedbreak.com<BR/><BR/>
<SPAN class="bold">Adresse:</SPAN><BR/>
Bed & Breakfast France<BR/>
C/o Association Française BAB France<BR/>

23 Centre Commerciale Les Vergers<BR/>

<div id="partnersBox">
<span class="partnersTxt"><A href="http://www.europcar.co.uk" class="roll" target="_blank">Europcar</A> <BR/>
"Location de voitures&quot;<BR/>

<A href="http://www.ferrysavers.com" class="roll" target="_blank">ferrysavers.com</A><BR/>
"Voyagez par ferry"<BR/><BR/><BR/>
<A href="http://www.bedbreak.com/Condresa/fr/ChHQPfr.asp" class="roll" target="_blank">Hotes qualite Paris</A><BR/>
"Hebergement de qualite garantie"<BR/><BR/><BR/><BR/><BR/>
<A href="http://www.thomascookpublishing.com/book.htm?series=Drive_Around&book_id=214" class="roll" target="_blank">Thomas Cook Publishing</A> <BR/>
"Editeurs des guides Bed & Breakfast"
<A href="http://www.holidayautos.co.uk" class="roll" target="_blank">Holiday Autos</A><BR/>

&quot;Location de voitures&quot; </span>
<div id="europcar"></div><BR/>
<div id="ferry"></div>
<div id="thomasCook"></div>
<div id="hotesQualiteParis"></div>
<div id="holidayAutos"></div>

<div id="footer"></div>

#wrapper {
margin: 0 auto;
You are also making the mistake of thinking that absolute positioning is the way to place elements on the page. Most layouts require little or NO absolute positioning.

12-13-2006, 04:34 PM
I'm not at my home pc at the moment so will try your amended codes and let you know how things go. But I would like to clear a few things:

1. I have never designed in CSS before.
2. The code was provided by one of the forum members and the <wrapper> tag did seem superstitious to me but decided to play along as I'm new to CSS and thought that was the way it is done.
3. Why do I need to resize my graphics to have it centered on 1024 x 768 and above? I am not targeting 800 x 600.
4.If layout require little or no absolute positioning, when is it appropriate to use it?
5. How are graphics and other elements positioned on the page then?

Thanks for clarifying these points for me.

12-13-2006, 05:48 PM
3. Well your layout is a fixed width so no need to resize the graphics. I said that before I looked at your layout and CSS
4. and 5. Just let things flow naturally don't use absolute positioning. If you want something so far from the left then use a left margin. Since your layout is a fixed width then this example would be better for you.


12-13-2006, 07:23 PM
The thing that centers an element on the page (a block-level element, that is) is this code:

#element {
margin: 0 auto;


#element {
margin: 2em auto 1em auto;

Essentially you are putting a margin all around the element—in the case of the first example, it zeros the margins on the top and bottom and uses equal margins on the left and right. Equal margins on both sides = centered element.

The second example creates a 2em top margin, an auto right margin, a 1em bottom margin, and an auto left margin. http://w3schools.com/css/css_margin.asp

You need a width on the #element, though, because if you don't specify one a block-level element will stretch to the full width of the container. In other words…

#not_centered {
margin: 0 auto;

#centered {
width: 950px;
margin: 0 auto;

<div id="not_centered">
<div id="centered"><!-- this one is centered --></div>

About CSS, all CSS does is style HTML… easy peasy. So you code your HTML as well as you can so it all makes sense semantically, then add you CSS. Eventually you'll start seeing where you need to add presentational elements (like <div> and <span>, in this case, <div id="wrapper">) to get the look you want (in this case, #wrapper { width: 800px; margin: 0 auto; }).

You might want to take a look at some basic tutorials:


Hope this helps…

12-14-2006, 01:23 PM
Thanks for all your help guys!:thumbsup: I will apply your recommendations and read through the tutorials...and hopefully everything goes fine.