Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Nested fluid / fixed layout - problem in IE5.x

    Good morning (or afternoon...or evening!)

    I am trying to achieve the following 2 column layout:

    Fixed right column (170px)
    Fluid left column (%-based, fills the rest of the browser window) -
    needs to contain 2 columns: 1 fixed left (375px + 10px right margin) , 1 fluid right (filling remaining of the container)

    I have come up with the following code:

    Code:
    html,body {margin:0; padding:0}
    body { font:76% arial,sans-serif}
    
    #main { float:left;width:100%;margin-left:-180px}
    #content { margin-left:180px}
    #banner_column { float:right; width:180px; background:#B9CAFF}
    
    #inner_wrap {float:right;width:100%; margin-left:-385px}
    #inner_right {margin-left:385px}
    #inner_left {float:left; width:375px; background:#33CC66}
    Code:
    <div id="container">
      <div id="main">
        <div id="content">
          <h1>Intro</h1>
          <p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
          <div id="inner_wrap">
            <div id="inner_right">
              <h2>Inner right column</h2>
              <p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div id="inner_left">
            <h2>Inner left column</h2>
            <p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
          </div>
          <br clear="all">
        </div>
      </div>
      <div id="banner_column">
        <p><strong>banner_column here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
      </div>
    </div>
    This code seems to work in FF, Opera and IE6, but I also need it to work in IE5.x and IE5 Mac (per client request).

    I understand percentage-based layouts can be quite buggy, but I don't know that there is any other way to do this layout.

    Is there any way I can make the above work in IE5 (PC + Mac)?

    Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello oslofish,
    I sure hope I understood your question...it seems like I did a page like your describing a while back. I dug it out and resized the columns and came up with this.

    Did the code you've been working on validate?? I forgot to check. I also don't have IE5 or a Mac to check anything with.
    Last edited by Excavator; 12-03-2006 at 09:04 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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