SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 100% width content in fluid width columns

    Hi all,

    I'm trying to get a new website I'm building working with CSS layouts instead of tables, but am coming close to giving up (due to time restrictions & frustration)... hopefully you gurus can save the world from another table layout .

    At its simplest what I want is a 100% width header, a fixed width left hand menu (say 150px) & fluid content taking up the rest (plus a footer). All of this I can get working fine, but I also want to put a data table in the content div & have it take up 100% of that div, but no matter what I try adding a table {width: 100%;} line to my style sheet breaks the layout in one browser or another (it needs to look good in IE5.5+ & all the other current browsers Moz, Firefox, NN, Opera, etc).

    I've tried multiple different ways of laying things out, but all break in at least one of the browsers. I've tried floating the menu left & giving it 150px width & then floating the content left, but then a 100% table in the content div (which works in IE, but in Firefox at least makes the content appear below the menu). I've tried making the menu position/width absolute & giving the content a left margin (works in Firefox & IE 5.5, but makes IE 6 width 100% + 150px).

    Any help would be greatly appreciated.

    Cheers,

    Jay.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jayeates
    I've tried making the menu position/width absolute & giving the content a left margin (works in Firefox & IE 5.5, but makes IE 6 width 100% + 150px)
    Sound's like you are not using a modern doctype, so you are seeing IE6 is quirks mode. You will still have to look after IE5 which is quirks mode, but adding a doctype will make your life easier.

    You don't have to set width: 100% to get a block level element to take up the full width, it will do that fine using width: auto (the default). This will also absorb your margins in IE.

    For layouts, see: http://thenoodleincident.com/tutoria...son/boxes.html

    The one on the far right bottom is what you want.

    Remember that with an absolute layout, you will only be able to get a footer as wide as the central column.

    Douglas
    Hello World

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    All of this I can get working fine, but I also want to put a data table in the content div & have it take up 100% of that div, but no matter what I try adding a table {width: 100%;} line to my style sheet breaks the layout in one browser or another
    I usually find that if you place the whole table in a div that is set to 100% width then IE will take the 100% width from its parent and not the whole window.

    If you could provide your code I'm sure we could come up with a suitable solution (if you haven't already found what you wanted from Dougs link ).

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Here's a quick example although I had to shorten the table to 99% due to the way this layout is constructed but in a normal layout you should be able to get the 100%:

    http://www.pmob.co.uk/temp/2column_simple_table.htm

    Hope that helps (view source the css is in the head).

    Paul
    Edit:


    If we take care of ie's 3 pixel jog then we can squeeze a 100% table in there:
    http://www.pmob.co.uk/temp/2column_simple_table2.htm

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    Australia
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks guys. Everything works nicely now, not only directly due to your replies, but because I indirectly learnt more about the ugly business of IE5 style sheet hacks to resolve multi-browser issues. It also helped me resolve a bunch of other smaller niggling issues I had (the whole teaching a man to fish vs giving him a fish thing). So thanks again, its good to know that there are people out there willing to help out others so readily & quickly. Hopefully I can repay the favour (or pay it forward) some day.

    Cheers,

    Jay.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •