#1
  1. Fanatic girl
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Netherlands
    Posts
    18
    Rep Power
    0

    Unhappy [CSS] The horror of layout design


    Hi all,

    I'm having big problems with designing a skeletton for my website. The website worked perfect, just it was bloated because i was using a lot of tested tables. Once a friend interested me into using as much as CSS as possible and using DIV-tags instead of tables, i finally got to redesign the layout of my website.


    So what's the problem?
    The problem is MSIE, but i'll get back to that later.

    The problem is that replacing tables with div tags using CSS properties is just not working out, i can't get the site to look the same on Mozilla Firebird (a standards-compliant browser) and MSIE (a non standards-compliant browser).

    To illustrate this problem, i've written a supersimple test html page.


    Show me the pics!
    Sure, for your convenience i've photoshopped you a basic layout of the site:

    http://www.fluffles.net/images/layout.png

    Clarification: both the left and the content section are of defined width, they don't stretch when you make the browser larger. Instead, the right section fills up all the space. The height is always 100%, so that the foot section will be at the bottom.

    Seems like an aweful standard site, right? Would it be too much to ask for this to actually work, without using tables? I was shocked to found out..


    So what the hell's not working
    Microsoft's inability to correctly display valid HTML code. But besides that, the following:

    http://www.fluffles.net/layout.html

    This is my effort to try to implement the layout as shown in the picture above (click on the link). Please look at the source of the page as well, it's really simplified. Also note that the page is valid HTML 4.01 strict and uses valid CSS code, tested with W3C validator.

    This site will work more or less with a standards-compliant browser like Mozilla Firebird, but MSIE screws this up 100%, probably because it sticks it's tail behind it's feet when it encounters a height: 100% CSS value. PANIC! WE GOTHA USE CSS! Ok i'll cut the flame.


    So what do you want to know from us?
    Well.. how the hell do I implement the layout as in the picture, without using tables? Even with Mozilla Firebird, I came across two problems:

    1. The right-section does not fill up all the space, only the width of the text is used, setting width to auto or to 100% won't give the desired result.

    2. Because the "main" div used height: 100%, the foot section isn't visible; you gotha scroll down. Now this ain't a problem if the content in the middle is rather long; but on short pages I want the footer to be visible.

    Could you guys please help me out? I spent over 2 days (10 hours total) trying almost everything, but no implementation got near to what I want *and* looked the same on both Mozilla Firebird and MSIE6.

    Thanks alot for reading and your efforts!

    A rather disappointed and pissed off girl,

    Enlightenment
    Last edited by Enlightenment; September 6th, 2003 at 02:41 AM.
  2. #2
  3. Fanatic girl
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Netherlands
    Posts
    18
    Rep Power
    0
    BTW, I did get this design working by using position: fixed. This way, the object would be fixed at a certain position, and will stay that way even if you scroll or whatever. Fixed as in, display that object at this place at all times.

    But of course MSIE had other plans than to implement this feature. MSIE is *NOT* HTML and CSS2 compliant. But you guys already knew that, of course.

    *sigh*
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    add height:100% to body in the css,
    and it should work in ie as well
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    You might want to look at this site for some brain churning.

    You're right about MSIE, always dumbing down or writing ugly hacks for that PoS.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    I AM A GOLDEN GOD
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    Apr 2003
    Location
    Camarillo, California
    Posts
    5,932
    Rep Power
    1166
    I've found that the simple CSS layout on <realworldstyle.com> works nicely across browsers. There's also a method of always positioning the footer at the bottom of the page, you can find it <here>.

IMN logo majestic logo threadwatch logo seochat tools logo