Results 1 to 5 of 5

Thread: Adding a column to 3-column fixed layout

  1. #1
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Adding a column to 3-column fixed layout

    1) Script Title:
    CSS Fixed Layout #3.2- (Fixed-Fixed-Fixed)
    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/la...d-fixed-fixed/
    3) Describe problem:
    I'd like to add a horizontal column beneath the banner and directly above columns 2-3 (leftcolumn-rightcolumn) in this layout.

    As these columns are negatively positioned, I've found no way to create a div that will sit above them and to the right of the contentcolumn.

    In the layout I've drawn below, the new column would go in the space indicated with dashes.

    Can anyone describe a method add this additional column?

    Thanks.

    BBBBBBBBBBBBBBB
    CCCC------------
    CCCC------------
    CCCCLLLLLLRRRRR
    CCCCLLLLLLRRRRR
    CCCCLLLLLLRRRRR

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    redesigning with absolute positition is hard because its going to very greatly per browser. I would suggest moving to a fluid layout based upon percentages.

    the way I would do this is create a 2 column float, left (C) and right (__)
    then after you put whatever you want in the dash column you can create another float for the remaining columns

    HTML Code:
    [B]__DOCTYPE___[/B]
    <body>
    
    <div id="wrapper">
          <div id="B">
          </div>
    
         <div id="C">
         </div>
    
         <div id="right">
              <p></p>
    
              <div id="L">
              </div>
    
              <div id="R">
         </div>
    
         <div id="footer">
         </div>
    </body>
    Code:
    <style type="text/css">
    body {
         margin: 0 auto;
         width: 80%;
         text-align: center;
         min-width: 780px;  /* 800x600 friendly */
    }
    div#wrapper {
         text-align: left;
    }
    
    div#C {
         float: left;
         width: 45%;
    }
    div#right {
         float: right;
         width: 45%;
    }
    div#L {
         float: left;
         width: 45%;
    }
    div#R {
         float: right;
         width: 45%;
    }
    div#footer {
         clear:both;
    }
    </style>

  3. #3
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, boogyman.

    Is there any disadvantage to sizing this layout with fixed pixel widths?

    I'd like to protect the integrity of my background image, which I need to create equal column lengths.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    fixed pixel widths will not render the same among different browsers due to the rendiering engines. using percentages allows for better efficiency and "fit".

    what type of background image do you have? is it an actual image, or is it a pattern that you can repeat? if it is an actual image, well then it would be hard, however once again a pattern would be better for accessibility. I am not trying to tell you what to do with your website though, I'm mearly offering suggestions.
    There may be a way of keeping the integrity of the image and being cross-browser, if you have a link to your page I will surely try to help you accomplish these two goals.

  5. #5
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    boogyman, I'm using a horizontal background image that includes distinct colors and borders for my three-column layout. The image tiles to guarantee that I have equal columns.

    I don't see any way to scale such an image, so I'd like to stay with the fixed-pixel layout if possible.

    I've been testing your layout with fixed-pixel settings, and it's working great in IE and Firefox. It's far more flexible than the negative-margin layouts in the DD library.

    I made one change, adding another div directly above "L" and "R". The extra div sits in the "---" space in my original chart.

    This allowed me to provide a background just for that div in the upper right.

    Thanks again!

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
  •