5 replies [Last post]
bobthebob01
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2006-10-23
Posts: 5
Points: 0

Hello,

I have been looking around to find the css trick to have 100% height column.
what i mean is that:
i have 2 columns, 1 which is 130px width on the left which holds the menu item vertically with a black background-color. then on its right a larger column of 500px with a white background-color.
What i am trying to have is the left column being 100% height even though the content of neither the left or the right column fills up the page. As if you would have a black stripe from top to bottom when you look at the page, and again even if you don't content filling up everything.

thanks for pointing out a trick.

julien

ps: i tried the "faux column" technique but it does not work out to what i try to do.

TeamMCS
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2007-09-15
Posts: 4
Points: 0

Does Margin-top:auto;

Does Margin-top:auto; margin-botom:auto; not work?

TeamMCS
Offline
newbie
Last seen: 14 years 47 weeks ago
Joined: 2007-09-15
Posts: 4
Points: 0

Does Margin-top:auto;

Does Margin-top:auto; margin-bottom:auto; not work?

bobthebob01
Offline
newbie
Last seen: 14 years 45 weeks ago
Joined: 2006-10-23
Posts: 5
Points: 0

Nop!

Thanks TeamMCS

but to which div would you apply this. the main div contain ("wrapper" in my case) or to the side bar div; or to the html tag in the css file?

Triumph (not verified)
Anonymous's picture
Guru

bobthebob01 wrote:ps: i

bobthebob01 wrote:
ps: i tried the "faux column" technique but it does not work out to what i try to do.

Faux columns is exactly what you need. Show your attempt.

qube99
Offline
Regular
Texas
Last seen: 14 years 44 weeks ago
Texas
Timezone: GMT-7
Joined: 2007-09-11
Posts: 39
Points: 0

A 3 column solution

Here's a 3 column I did for a client. It uses images which I did not include here. No matter which column is the longest, they all expand together and stay aligned. The content is dynamic so you never know which one is the longest.

#TC_hack{ /* centering hack for IE */ text-align:center; } #TCtop { /* top of the border */ width:669px; z-index:3; } #TCbottom { /* bottom of the border */ width:669px; z-index:3; } .TCsubhead { /* positions the graphic subhead */ position:relative; top:7px; font: normal 13px Arial, Helvetica, sans-serif; } .TClink a, .TClink a:hover:{ color: #6CA251; text-decoration: none !important; } #TCwrapper1 { width: 669px; font: normal 11px Arial, Helvetica, sans-serif; text-align:left; margin-left:auto; margin-right:auto; overflow:auto; background-image: url('../images/methodology/3colMid1.JPG'); background-repeat:repeat-y; } #TCwrapper2 { width: 669px; font: normal 11px Arial, Helvetica, sans-serif; text-align:left; margin-left:auto; margin-right:auto; overflow:auto; background-image: url('../images/methodology/3colMid2.JPG'); background-repeat:repeat-y; } #TCleft { float:left; width:196px !important; /* override for compliant browsers */ w\idth:216px; /* padding hack for IE */ float:left; padding:10px; margin-right:10px; line-height:14px; z-index:2; } #TCcenter { float:left; width:196px !important; /* override for compliant browsers */ w\idth:216px; /* padding hack for IE */ padding:10px 10px 10px 10px; line-height:14px; z-index:2; } #TCright { float:left; width:196px !important; /* override for compliant browsers */ w\idth:216px; /* padding hack for IE */ padding:10px; margin-left:10px; line-height:14px; z-index:2; } .TC_head{ text-align: center; font-size:13px; font-weight: bold; } .middle{vertical-align: middle; } /* small logo alignment */ *************************************************************

Inputs

  • Contract (when applicable)
  • Project statement of work
  • Enterprise environmental factors
  • Organizational process assets

Tools & Techniques

  1. Tool & Tech
  2. Tool & Tech
  3. Tool & Tech
  4. Tool & Tech
  5. Tool & Tech
  6. Tool & Tech
  7. More >

Outputs

  • Project Charter

Steve Strickland
Ecommerce-Retail.com