General discussion


Creating a centered page layout with CSS

By MaryWeilage Editor ·
article root

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

Collapse -

Discussion thread from the e-newsletter send

by MaryWeilage Editor In reply to Creating a centered page ...

We thought members might be interested to read the discussion that we created for the e-newsletter publication of this Michael Meadhra column:

Collapse -

Excellent - but how to get DIV's to size like TD's

by rusten In reply to Creating a centered page ...

This article provides the solution to a very counter-intuitive component of moving to CSS from table-based layout - thank you.

Along similar lines, another problem I've run into is that DIV's do not dynamically scale to the size of the content as TD elements do.

For example, in your example code above, assume we set the background color of the navigation (div#nav), say "background-color: yellow;"

In that case, the yellow DIV/CELL would not scale to the length of the content in the paragraph DIV/CELL. If this were a table layout, this occurs intrinsically.

I've tried "heigh: 100%"; however, this doesn't address this issue. Any ideas?

Thank you in advance!

Collapse -


by lelandl In reply to Excellent - but how to ge ...

I had the same problem with the left column. I use a graphic which didn't fill down to the footer. I placed the graphic as the background image of the wrapper div and it fills all the way to the bottom and adjusts with the content. The overlaying divs' background colours clip the top and bottom.

Collapse -

Excellent question!

by jomoweb In reply to Excellent - but how to ge ...

I have been working on an all CSS template for these two sites: <a href=""></a> - <a href=""></a>

I ran into the same problem. After getting the home page exactly where I wanted it with a Div wrapper for the main div, I realized that other pages will be longer or shorter, and that wrapper from the home page won't work for everything. (Notice on WayneDowdyArt how the body div wrapper on the bio page is perfect, but the same sized one on the home page is too long)

From my observation, setting the height at 100% makes the div the exact same size as 100% of the monitor display, no matter where on the page the DIV is.

Leland's workaround is probably as good as it gets right now, or you can always make a class for every page, adjusting the height manually, if it is a small site.

Div's don't nest and resize like tables do, so I am not sure what the advatage of using them really is. Maybe this problem will be recognized in future releases of CSS.

If there are any gurus who can fix this, I will fax you a coffee and dougnut!

Collapse -

Use float

by jomoweb In reply to Excellent question!

I finally solved the resizing issue with the help of this tutorial:

The float attribute was key to the solution. Hope this helps solve your resizing issue.

Collapse -

Mozilla/Firefox solution

by ferdfrog In reply to Excellent - but how to ge ...
Collapse -

Montior Sizing Events

First, you'll probably need to montitor events that affect the height and with of the displayed elements.

Then, whenever one of these events fires, you could call a function that calculates how tall "100%" is in pixels, and then change the CSS attributes accordingly.

On a particularly busy page, with lots of elements, this can be highly resource intensive - but it should do what you want.

Collapse -

Problem with IE?

by jdracy In reply to Creating a centered page ...

I created a page using this code in Dreamweaver, ran the XHTML clean-up tool, and found that the layout is not centered in IE 6.0. Further research showed that Dreamweaver was adding an XML tag to the top of the file ("<?xml version="1.0" encoding="iso-8859-1"?>") that causes a problem in IE; there is no effect in either Firefox or Opera.

My experience is that the only way to guarantee a centered layout in IE is to set the BODY text-align attribute to "centered", then make certain that I change it to what I really want for the DIV's. IE does not recognize the "margin: auto" attribute when that extra XML line is in there.

Collapse -

IE problem for sure.

by macleod.andrew In reply to Problem with IE?

I think I've found the reason IE doesn't center properly (except in the test examples from these articles).

First of all you HAVE TO use a XHTML DOCTYPE declaration, either Transitional OR Strict.

Second of all you HAVE TO use PROPER XHTML coding practices. I found that my problem was that I was using a <style> tag outside of the proper <head> tag. As soon as I put the <style> tag back in the <head> it centered with margin: 0 auto; without the text-align: center; hack!

The moral here is check your code for ANYTHING that's not a standard coding practice and fix it or remove it. This worked for me and I've been looking for a fix to this problem for at least 2 weeks now. All I have to do now to make sure that my theory is correct - is go back to my other sites and try it out. If I don't post an update... then this is the problem with IE.

I hope this helps you (and anyone else who's been scratching their head over this IE problem).


Collapse -

IE still doesn't work

by jdracy In reply to IE problem for sure.

I have my <style> tags correctly placed inside the <head> tag, my DOCTYPE is XHTML 1.0 Transitional. However, with the xml tag in the first line (which declares the document to xml version 1.0) IE will not work. When I remove this line, IE works.

The problem isn't with tag placement or DOCTYPE.

Related Discussions

Related Forums