CSS two columns

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS two columns

Post 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 :)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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.
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post 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.
Post Reply