Adding a column to 3-column fixed layout

**slobjones** · 10-17-2007, 03:02 AM

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

**boogyman** · 10-17-2007, 12:46 PM

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>

**slobjones** · 10-18-2007, 03:35 AM

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.

**boogyman** · 10-18-2007, 12:39 PM

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.

**slobjones** · 10-21-2007, 03:51 AM

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!

Thread: Adding a column to 3-column fixed layout

Thread Tools

Search Thread

Adding a column to 3-column fixed layout

Bookmarks

Bookmarks

Posting Permissions