Announcement

**missing-score** · Mar 4, 2004, 05:52 PM

as far as I know, there isnt any vertical align formatting in CSS, I may be wrong though.

To center content, I use

Code:

CSS:

body {
   margin: 0px auto 0px auto;
   text-align: center;
}

.wrapper {
   margin: 0px auto 0px auto;
}


XHTML:

<body>

   <div class="wrapper">

        .... content in here

   </div>

</body>

Hope this helps.

**Nightfire** · Mar 4, 2004, 06:04 PM

There's vertical-align:top/middle/bottom Don't think there's an auto though

**spl1nter** · Mar 4, 2004, 06:07 PM

Thanks a lot

Woops, I meant to edit the auto bit. I had tried middle, top and bottom but it had no effect at all on the text. I thought I'd just try auto out of hope, but it didn't work.

**missing-score** · Mar 4, 2004, 06:16 PM

Ive seen the vertical align used but it never actually seems to do anything? does anyone know anything about this?

**Nightfire** · Mar 4, 2004, 06:19 PM

Not sure how it works really. Better wait for the experts

. It seemed to work for me though on my smilies for my site. I got them aligned to the bottom and they're staying inline with the text now.

**spl1nter** · Mar 4, 2004, 06:19 PM

When I set it to 500px (just to see if anything happened), it made the area with "This is where the logo will go." really tall (500 pixels I'm guessing :P). The text stayed at the top though?

**lavalamp** · Mar 4, 2004, 08:15 PM

Just to clear a couple of points up:

vertical-align
lots of stull on "auto"

**Antoniohawk** · Mar 4, 2004, 09:46 PM

center align:

Code:

margin: 0 auto;

**ronaldb66** · Mar 5, 2004, 02:45 AM

IE, and vert. alignment

IE (5.x, 6?) doesn't understand the margin: auto bit; as a hack, to center a block element, its parent should have a text-align: center property, which IE will incorrectly apply to the block element as well. Inside the centered block, text alignment may have to be corrected again. Do specify margin-left / -right: auto as well for compliant browsers.

The vertical-align property only applies to inline elements / content and table cells; check the specs for more detail: CSS 2.1: vertical-align.

**jdan** · Mar 5, 2004, 06:30 AM

Yea, you wanna do pretty much anything with IE you have to hack something or other...
Remember trying to get max width working in it. :P

**spl1nter** · Mar 5, 2004, 08:24 AM

I've decided that (just this once) I'll use a table. It will hopefully get removed when I get a logo as it should take up the full space.

**lavalamp** · Mar 5, 2004, 11:57 AM

Re: IE, and vert. alignment

Originally posted by ronaldb66
IE (5.x, 6?) doesn't understand the margin: auto bit;

IE 6 does.

Originally posted by jdan
Yea, you wanna do pretty much anything with IE you have to hack something or other

Not true, I make a point never to use hacks and I've created (what I consider to be) a pretty decent layout.

Originally posted by spl1nter
I've decided that (just this once) I'll use a table.

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

The key is not to rely on fixed width content areas, but to determine the width of the content area via the left and right margins.
For example, the layout code that I posted a link to above has a content area with left and right margin widths of 170px.
Since then I have re-done the styles to have a left and right margin of 28% at the sides, this makes the page look fine on 640x480 and on higher resolutions such as 1024x768. You can see the layout in action here and here.

Your current layout could quite easily be converted into CSS while at the same time making it more fluid. If you still insist on centring a fixed width block of content then do this:

position:absolute;left:50%;

And then have a margin-left: set to minus half of the content width, so for instance if the content block is 200px wide you would do this:

margin-left:-100px;

Unfortunately if the content is very wide (like on yours) then on a smaller resolution the left hand side of the content will be cut off, but the user will still be able to scroll to the right and see the content over there.

Fluid layouts are the furture!!!

**spl1nter** · Mar 5, 2004, 06:51 PM

I needed to vertically align the text, not horizontally.

It's OK, I managed to do it with

Code:

position: relative;
top: 50%;

But then I decided that I probably wouldn't need it and got rid of it :P

I have now got the design ready and you can see it here.

If you go to the updates page you'll see how much CSS has helped the site.

**lavalamp** · Mar 6, 2004, 08:10 AM

I'm still seeing tables...

Announcement

A couple of CSS questions.

A couple of CSS questions.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment