Furtopia | Family Friendly Furry Forum and IRC Chat!

the basement => the archives => web design support => Topic started by: Firehazard on October 25, 2008, 05:01:59 pm

Title: CSS formatting/layout issues
Post by: Firehazard on October 25, 2008, 05:01:59 pm
So, I'm currently the webmaster for Morphicon (Columbus, Ohio's furry convention) and I'm redesigning the whole site (http://phoecena.cetacea.net/~morphicon/).  But I've run into a weird formatting/layout issue.  I've set it up so there's a centered container with a white background, on top of a grayscale brick wallpaper.  Inside the container there's the actual page content on the left, and a navbar on the right.  The container is designed so that if your window isn't wide enough, the content pane gets narrower and the header image is cropped from the right side.  However, in doing this, I've somehow made it so that if there's not enough text in the page, the content pane doesn't stretch all the way out (http://phoecena.cetacea.net/~morphicon/staff.html) to meet the navbar, so "centered" text is actually not centered.  Furthermore, on one page (http://phoecena.cetacea.net/~morphicon/pastyears.html) this even cuts the white background short (scroll down and look under the navbar).  So, briefly, how do I get my content pane to always fill the whole distance from the left edge to the navbar, without setting a fixed width?

The CSS file is here (http://phoecena.cetacea.net/~morphicon/browser.css).
Title: Re: CSS formatting/layout issues
Post by: Richard K Niner on October 26, 2008, 11:52:22 am
Okay, in this case the problem stems from that width:auto; line in browser.css, because that permits the element to collapse so long as it won't affect word-wrapping (i.e. long paragraphs keep it stuck out)

However, you can fix the width of #leftcontent as a percentage, so that it scales with #container.  Thus, the following solution appears to work in Firefox:

#leftcontent {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

(Those last two lines force Firefox and CSS3-implementing browsers to use the IE box model)

As well, IE may benefit if you add the following line to the top of each page (above the doctype):
<?xml version="1.0" encoding="utf-8"?><!-- This comment is meant for IE7 -->

That should force quirks mode so IE uses its old box model.  (Unless you want to switch back to HTML 4.x Transitional.  Also I note that your page is technically not valid XHTML as it has the wrong MIME-type, and thus should be using the Transitional DTD.)