CSS layout problems

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS layout problems

Post by alex.barylski »

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
  <head>
    <base href="" />
    <title>Learning CSS</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <style type="text/css">
    <!--
      body {
        margin: 0px;
        padding: 0px;
      }

      #html_container {
        background-color: lightgrey;
        width: 100%;
        height: 100%;
      }

      #header {
        background-color: green;
        width: 100%;
      }

      #body {
        background-color: purple;
        width: 100%;
        height: 100%;
      }

      #footer {
        background-color: orange;
        width: 100%;
      }
    -->
    </style>
  </head>
  <body>
    <div id="html_container">
      <div id="header">
        Footer
      </div>

      <div id="body">
        Here is some body text and stuff YO!!!
      </div>

      <div id="footer">
        Header
      </div>
    </div>
  </body>
</html>
This STRICT xhtml doesn't behave even remotely similar in FF and IE...or as desired :(

This is what I was afraid of :(

Often my designs include a header, menubar, body and footer...

I typically like my the entire layout to be *fluid* in that even though there may be ZERO body content, the footer is still displayed flush at the bottom of the web page...only when there is more text than the window can handle do I I accept the footer being pushed down...

But by no means do I like the footer being butt up against the bottom of my content...that just looks UGLY!!!

IE renders the above code sort of like I would expect, but the body container assume 100% of the height of the document, not just what it has left to play with considering the header(s) and footer(s) that may exist...

This is possible to achieve using tables and I believe is even cross browser friendly...

At least in FF and IE anways :)

Can someone either offer me a cross browser fix or suggestion? Obviously being STRICT is important to me, as I am an extremist :P

Cheers :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Am I really only stuck with using a fixed pixel amount, like say 400px?

I suppose I could change that accordingly using some fancy JScript (if it's available) but what happens then if a user visits my page using some crazy high resolution???

p.s-I should also make obvious my priorities:

1) W3C STRICT validation - using the first tag-thingy makes sure that it's valid correct? as the browser doesn't render what it's not suppose to understand when I use the DTD???

2) As many browsers as possible (PDA's, Desktop, cellphones, Visually impared renders, etc)

3) Document size (obviously I know t store CSS in external file later)

Cheers :)
Post Reply