Make Left column 100% of browser height using CSS

[boohoowoofoo]

Hey all!

So I am attaching an images where the left column wont expand to 100% height of the browser. I am trying to make it a navigation menu that will act like a table and wont move at all as i scroll through the content on the right side.

http://img854.imageshack.us/i/fixedwidthcsslayouts2co.jpg/

My CSS is as follows:


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height: 100%;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#leftcolumn {
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 161px;
float: left;
min-height: 100%;
}
#rightcolumn {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 20px 0px 10px 20px;
padding: 10px;
height: 500px;
width: 678px;
display: inline;
position: relative;
}


Am I doing something wrong? I kept reading in my google searches that 100% height does not exactly mean it will take up 100% of the browser. If that is the case, how can I make the left column take up the either left part of the site?

Thank you guys in advanced!

 

[boohoowoofoo]

Did a bit more research,

Should I just do a table? Or is that a big no-no in these html5 css3 days?

 

[jsm4182]

The best solution I have found for things like this is to write a simple javascript that finds the height of the window then sets the css to that height.

 

[Cabbit]

Try a gradient across both your columns, should create something like what your looking for easily.

The reason setting the height to 100% wont work is due to that having to have a inherent value to know what 100% is.

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm demonstrates some common ways to get a multi column site equal heights.

 

[boohoowoofoo]

Thank you for the replies guys!

Cabbit- I like the site your provided! I am actually looking for a left column that will stay static and not move at all, while the right hand side will have content scrolling.

The page screenshot I show works perfectly, but the left bar wont fill the browser height. I tried it in a another version of this template, and it worked, but then the 2nd colum went behind the first one.

I know there is a simple spacing issue, but for some reason when I make the 2nd column float left, it doesn't connect to the first column. Instead it floats behind it (in my previous attempt).


jsm4182 - simple javascript? That is a new language to me any guidance what the name of the script would be so I can search it online?

 

[laurim]

Have you considered a menu that adjusts to scrolling, like here:

http://css-tricks.com/examples/ScrollingSidebar/


BTW- Be careful when doing things outside the norm because you will probably end up chasing browser issues. You'll get it working in one browser and it won't in another. A real headache.

 

[UTclassof89]

the trick is to specify the html height (in addition to the body height):

html{
height:100%;
}

 

[boohoowoofoo]

the trick is to specify the html height (in addition to the body height):

html{
height:100%;
}

That worked!

The only issue I have now is that the left column scrolls. I would like to keep it static, i am going to have only a small navigational menu there with my website logo.

I am not trying to do something outside of the norm, just a simple column on the lefthand side that will take up the either left side of the page, and then the content area on the right.

You guys all gave me awesome examples of what I was looking for but each example had the left bar scrolling. I do not have enough content to need the lefthand side to scroll, so I wanted it to act like a window or a table.

this website has what I am trying to do in the lefthand side:
http://www.francochimenti.it/

notice its like a separate window, the only thing is I do not need it to be scrollable.

UTclassof89 your code worked, except now when i scroll down the bar on the lefthand moves along with the content on the right.

Thank you everyone for your effort


EDIT: Browsing the forums and troy's example is perfect!

http://troydonaldson.com/print-design/mirror-movie-poster/

Left hand window, right side content. Left side does not move when you scroll.

Sorry if I am using the wrong terms, I am not a pro in dreamweaver, I made like 3 sites but now I want to do something decent looking lol.

 

[designguy79]

#dividgoeshere {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
}

Try something like that.

HTH,

~ Jeremy

 

[boohoowoofoo]

#dividgoeshere {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
}

Try something like that.

HTH,

~ Jeremy

It worked!!

Do you think something like this will work okay in ipad and other browsers?

I have the left column fixed and static. I put the right content column floating to the right, but the margin on the rightside is about 60px so it can line up with the left column. Everything is inside a div container. Just want to make sure I am doing a common practice and nothing too crazy.

Thank you everyone!