Page 1 of 1

CSS layout problems

Posted: Tue May 23, 2006 5:11 pm
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 :)

Posted: Tue May 23, 2006 5:14 pm
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 :)