General discussion

  • Creator
    Topic
  • #2289681

    Creating a centered page layout with CSS

    Locked

    by maryweilage ·

    article root

All Comments

  • Author
    Replies
    • #2703585

      Discussion thread from the e-newsletter send

      by maryweilage ·

      In reply to Creating a centered page layout with CSS

      We thought members might be interested to read the discussion that we created for the e-newsletter publication of this Michael Meadhra column:
      http://builder.com.com/5208-6230-0.html?forumID=23&threadID=156756&start=0

    • #2704149

      Excellent – but how to get DIV’s to size like TD’s

      by rusten ·

      In reply to Creating a centered page layout with CSS

      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!

      • #2710677

        work-around

        by lelandl ·

        In reply to Excellent – but how to get DIV’s to size like TD’s

        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.

      • #2711327

        Excellent question!

        by jomoweb ·

        In reply to Excellent – but how to get DIV’s to size like TD’s

        I have been working on an all CSS template for these two sites: WayneDowdyArt.comFetishGlass.com

        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!

      • #2711282

        Mozilla/Firefox solution

        by ferdfrog ·

        In reply to Excellent – but how to get DIV’s to size like TD’s

        Mozilla and Firefox support the “min-height” CSS property.

        http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#propdef-min-height

      • #2711133

        Montior Sizing Events

        by bucky kaufman (mcsd) ·

        In reply to Excellent – but how to get DIV’s to size like TD’s

        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.

    • #2705072

      Problem with IE?

      by jdracy ·

      In reply to Creating a centered page layout with CSS

      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 (““) 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.

      • #2705030

        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

        • #2709752

          IE still doesn’t work

          by jdracy ·

          In reply to IE problem for sure.

          I have my

        • #2711117

          So remove the line

          by andy ·

          In reply to IE still doesn’t work

          You don’t need the line. It’s a web page. Validate it as XHTML, not XML. So remove the XML tags and CSS-center it to your heart’s content. Motto: what works doesn’t need fixing.

    • #2710674

      Mine doesn’t center

      by lelandl ·

      In reply to Creating a centered page layout with CSS

      I used the code on a site I am working on and the page doesn’t center when I go to a higher resolution, it stays on the left. I made a test page with an outer and one header and got the same results, no centering.

      CSS code:
      div#outer {
      width:770px;
      background-image: url(../images/background-main.gif);
      background-color:#FFFFFF;
      margin-bottom: 50px;
      margin-left: auto;
      margin-right: auto;
      padding: 0px;
      border: thin solid #000000
      }

      HTML:

      For our Community

      …….

      • #2711273

        check your html

        by wearsmanyhats ·

        In reply to Mine doesn’t center

        First of all, this is not valid html:

        For our Community

        Should be something like:

        For our Community

        • #2711178

          HTML checked

          by lelandl ·

          In reply to check your html

          The HTML has been checked many times. I even copied the HTML from the article and changed IDs and classes to match my css. I then copied the CSS and changed the ID names to match my HTML but no luck.

          The HTML validates with the W3C HTML validation program and I don’t think that not using the tag in the title is breaking the centering. (http://jigsaw.w3.org/css-validator/ for CSS and http://validator.w3.org/ for HTML)

          The problem I have with the tags in this instance is the extra padding they place under the text. I think there is a way to suppress it, but haven’t found the method yet.

          I am going to start from scratch and add one component at a time to see what I am adding that is breaking the centering.

          Leland

        • #2711027

          Appears to be IE problem

          by lelandl ·

          In reply to HTML checked

          I checked my page in Firefox and it centers correctly, but still doesn’t in IE. Apparently IE5.x has a problem with the auto margins and since mine is an upgrade to IE6.x maybe it kept the 5.x problem. A work-around is to use “text-align:center;” in the body. Since this attribute is inherited you have to explicity set the “text-align” in each contained

          to maintain formating throughout the site. Not pretty, but it worked.

          To double check I copied code from another centering article and it was the same, worked in Firefox but not in IE without using “text-align:center”.

          I also fixed my padding with “margin-top:0px;
          margin-bottom:0px;”. I thought I had tried that but I guess I missed it.

    • #2710122

      Excellent Article. However, there is still an issue of Vertical Centering

      by mail4manoj ·

      In reply to Creating a centered page layout with CSS

      Hi,

      Though the article, shown an excellent way of implementing horizontal centering, there are couple of issues that it fails to resolve:
      (a) Vertical Centering – which can be solved using a table. Declare an outer table – 100% width, 100% height. Declare your content table as the contents to the only cell for the outer table. The TD tag for the outer table shall have the ALIGN=”CENTER” and VALIGN=”MIDDLE” attributes. Thus, ensuring that your table is actually centered to the user’s screen.

      (b) What happens when the user accesses the same, using a Browser that does not support CSS? The table design would still continue to work in this case.

      Hope this information has been useful to you.

      Thank you.

      MANOJ KUMAR SHARMA.

    • #2721319

      Fantastic

      by silikonski ·

      In reply to Creating a centered page layout with CSS

      Thank you!

Viewing 5 reply threads