[thelist] Trying to center using CSS

[Mark Gallagher]

Amy Johnson wrote:
 > I am creating my first tableless site using CSS.  In general, I think
 >  it is going ok.  I have embedded DIVS set up and am able to center
 > things as I need to.  However, I can't center the primary DIV.  I
 > would like it to center within different size screens, 17", 19", 21",
 >  etc.
 >
 > Below is some of my CSS code.  DIV.main is meant to be the entire
 > screen.  DIV.ht contains all of my web page.  So I want for DIV.ht,
 > which is a set width, to always be centered in DIV.main.  I don't
 > think percentages will work for the left value of DIV.ht since it is
 > a fixed width.  But left:auto doesn't work either.  This seems like
 > it should be obvious.  What am I missing?

First off, why do they have fixed heights?  Why does DIV.main's height:
statement give no unit for its value?  Why is DIV.main positioned
absolutely?  Why have you set a background-color, but no foreground
color?  Sorry if that seems too inquisitve, but if this is your first
time, it's good to start thinking of these issues straight away :-).  Oh
yeah, why are .main and .ht classes instead of ids?

Try this:

body {
   margin: 0;
   padding: 0;
}

div.main {
   background-color: black;
   color: white;
   width: 100%;
   margin: 0;
   text-align: center;
}

div.ht {
   height: 550px;
   width: 600px;
   margin-top: 70px;
}

That should work.  Here the "text-align: center;" statement comes into
play, as div.ht being relatively positioned means that it can, in fact,
be affected by the text-alignment of its container element (presumably
div.main).

You can also try:

div.main {
   background-color: black;
   color: white;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   width: 100%;
   text-align: center;
}

div.ht {
   position: absolute;
   top: 70px;
   width: 600px;
   height: 550px;
   margin: auto;
}

Here the "margin: auto;" statement tells the browser "automatically
calculate symmetrical values for the margin".

 > DIV.main        {background-color: black; position: absolute; height:
 >  700; width: 100%; top: 0px; bottom: 0px; left: 0px; right: 0px;
 > text-align: center; }
 >
 > DIV.ht          {position: absolute; height: 550px; width: 600px;
 > top: 70px; left:  auto; }

In future, it'd be easier to see this sort of thing if you posted a URL
- that way we can *see* what the problem is, but can still find the
stylesheet if need be :-)


<tip type="structuring CSS" author="Mark Gallagher" reason="I'm sure I
owe somewhere">
The order in which you place each statement within an element's
definition in your CSS is not particularly important (unless you're
trying to take advantage of cascades within an element, which is not
very useful[0]), but it can make it easier to find stuff.  Personally, I
usually structure my definitions like so:

element {
   color/background statements;
   positional statements (position, top, right, bottom, left);
   width/height statements;
   alignment statements (float, text-align, vertical-align);
   margin/padding statements;
   other non-fonty statements;
   border statements;
   font-related matters[1] (font-size, font-style, font-weight,
   font-family);
}

This way if I'm looking for information on what colours I've defined, I
can look at the top of each definition.  Fonts, the bottom, and so on.

[0] Except where exploiting browser bugs, of course.
[1] IE3 has a bug that occurs whenever font-family is included in a
     definition, but not as the very last statement. Unfortunately, I
     don't remember what it is exactly.
</tip>

--
Mark Gallagher
Desperately attempting - and failing - to stay on topic since 1999
fuddleriffic - http://cyberfuddle.com/
blog - http://cyberfuddle.com/infinitebabble/