Page 1 of 1

CSS two columns

Posted: Thu Feb 15, 2007 11:46 pm
by alex.barylski
I have a work area which is made of two columns:

1) Variable width left aligned
2) Fixed width (200px) right aligned

The variable width column should obviously fill the width of the remaining screen but the fixed width is always 200px but it's height should always be flush with the left hand side content and/or repeat until the footer/bottom of visible screen space.

I understand I am to use a faux column technique for the right, in that I will use an image repeat to acquire that effect.

This worked in IE but not even close in FF:

Code: Select all

#body {
  background-color: red;
}

#left {
  float: right;
  width: 180px;
  height: 100%;

  margin-bottom: -80px;

  background-color: #FFFBE7;
}

Code: Select all

<div id="body">
  <div id="left">
    This is the left panel and is fixed in width
  </div>

  This is the primary content area and should flow "around" the left floating DIV which has it's height set to 100%

</div>
edit: Just discovered a new problem...I wrapped the above HTML in a parent DIV which height is set to 100% but because of a header which comes before it (80px) the footer is now always pushed out of sight. I tried setting height: 100% and margin-bottom: -80px which worked in IE but not in FF...I think I need this wrapper in order to use the faux column technique???

How can I do this so it's cross browser friendly? Bah...

Thanks again :)

Cheers :)

Posted: Fri Feb 16, 2007 12:04 am
by nickvd
The way I always understood faux-columns is to use a repeating background image, usually applied to the body, or some other element that would stretch across the distances you need. This would assume that you don't have un-repeatable patterns or the like...

Posted: Fri Feb 16, 2007 12:23 am
by alex.barylski
I don't think I can even use faux columns...

Here is my problem

I have a wrapper div whose height will be set to 100% but the header DIV which comes before it is 80px high so setting this wrapper DIV to height 100% makes the footer always get pushed to the bottom...

Once I have that DIV height set to 100% - 80px (I tried using margin-bottom: -80px *only* works in IE) I figure I can set the child DIV right column to 100% and it will fill the area?

The content DIV (left side) will fill whatever space it needs to and won't impede on the right side column (which would happen if I used faux columns and floated the DIV to the right...???)

Does it sound like i'm on the right track?

Anyone a CSS guru,. care to help?

Cheers :)

Posted: Fri Feb 16, 2007 3:33 am
by Oren
I didn't read anything but the post title, but there are plenty of resources out there:

http://www.pmob.co.uk/
http://www.alistapart.com/articles/multicolumnlayouts
http://www.alistapart.com/articles/holygrail

Just read some articles and then, when you master the basics - you'll be able to come up with your own ideas which will be the best for each specific situation you have.

Posted: Fri Feb 16, 2007 3:48 am
by shwanky
Oren wrote:I didn't read anything but the post title, but there are plenty of resources out there:

http://www.pmob.co.uk/
http://www.alistapart.com/articles/multicolumnlayouts
http://www.alistapart.com/articles/holygrail

Just read some articles and then, when you master the basics - you'll be able to come up with your own ideas which will be the best for each specific situation you have.
Alistapart is pretty cool. Also, cssvault.com is a good repository of designs, resources and tutorials. Honestly, best way to learn to do something with CSS is trial and error. For 2 column layout checkout the tutorials on glish.com/css.