SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed width sidebar + flexible content = headache

    As mentioned in the title, I'm working on a page which consists of a fixed width left sidebar, and flexible content div next to it. You can see the test page here.

    The sidebar is absolutely positioned (an image for now, it'll be an unordered list later on), and the content div (#main) floated to the left, with a table in it set to a width of 100% (yes: it is tabular data!).

    Works in: Firefox Mac/Windows; IE7.

    Problems:
    * Table doesn't stretch to 100% in Safari (Mac)
    * Sidebar disappears in IE6
    * Unrelated: dropdown select refuses to show font-size as 8px in Firefox (Windows)

    What am I doing wrong? Any help appreciated!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The problem is that you have floated the right column but haven't given it a width so there is really nothing to base the table width on as width will be auto.

    You don't need to float the right column anyway as margins will suffice and fix both IE and safari at the same time:

    Code:
        #main{
                    margin-left: 131px;
                    margin-right: 25px;
                }
    The drop down font-size in Firefox is probably because you have set your browser settings not to go below a minimum font-size (Tools,options, Content, Advanced, set minimum font size).

    Hope that helps

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    There's no need for absolute positioning for that:
    Code:
    #nav {
      float: left;
      width: 111px;
    }
    #main {
      margin-left: 131px;
    }
    You float the left column and give the right column an equal(or greater) margin to keep it away from the float, that's all.

    Hope it helps

    Edit: What he said ^^

  4. #4
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and Mark! Bliss!

    Well almost: IE6 now drops the table below the sidebar when it's set to 100% width. Only when I set the table's width to 99% instead does it display correctly. I'd really like that table to be 100% wide...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Well if you used my code instead of Marks it would have worked without problem

    If you are using Mark's code you will have to use a hack to fix the problem.

    Code:
    * html #main{height:1%}
    However if you have no need for a footer under both columns then the absolute side column may be the best option here as the table will still drop in IE when the screen is at a smaller size.

    If you are going to put a footer under both columns then you will need to leave the sidebar floated.

  6. #6
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Splendid advice Paul, many thanks. I'll stick with the absolute side column as I won't be needing a footer. Cheers!

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Well if you used my code instead of Marks it would have worked without problem
    Do I detect a hint of smug? I've never needed to force hasLayout on this simplest of layouts, a float and a margin equal to the width of the float is all that's needed..
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #left { float: left; width: 200px }
    #right { margin-left: 200px }
    </style>
    </head>
    <body>
    <div id="left">Left</div>
    <div id="right">Right</div>
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do I detect a hint of smug?
    Not at all

    i've never needed to force hasLayout on this simplest of layouts,
    You haven't lived then

    Because #right doesn't have "layout" then it won't know how wide it is and that's the reason that IE gets the width of the 100&#37; table wrong because it doesn't have anything solid to work with.

    Most elements that have their dimensions defined by margins alone will need "layout" in IE unless they are just holding simple content such as text. If they are holding more complicated elements such as floats and tables then the parent will need "layout" otherwise the whole thing goes to pot. You will find that things don't fit properly and that elements will disappear and re-appear (not to mention the 3px jog and associated problems).


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
  •