Author Topic: CSS formatting/layout issues  (Read 2208 times)

0 Members and 1 Guest are viewing this topic.

Offline Firehazard

  • Hero Member
  • Slightly used and mostly confused!
  • *****
  • Male
  • Posts: 1414
    • My FurAffinity
CSS formatting/layout issues
« on: October 25, 2008, 02:01:59 pm »
So, I'm currently the webmaster for Morphicon (Columbus, Ohio's furry convention) and I'm redesigning the whole site.  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 to meet the navbar, so "centered" text is actually not centered.  Furthermore, on one page 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.
Quote from: Savaaha
We have a 27in westinghouse hd flat widescreen TV, Tak has it connected up so its our TV and his comp monitor. We had it since 2009 and its going great.

Art by me.

Offline Richard K Niner

  • Sr. Member
  • Indecision incarnate canine
  • ****
  • Male
  • Posts: 341
    • K9 Unit
Re: CSS formatting/layout issues
« Reply #1 on: October 26, 2008, 08: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.)