Question

http://jsfiddle.net/ww7dN/

I’m trying to design a page that is “split” in 2 colors all the way down (green on the left, blue on the right). In each section I want to put a column. First problem is that the colors don’t fill the whole page. Second problem is that when I resize the page the horizontal scrollbars don’t appear.

What am I doing wrong? Or do you have a better way to achieve this effect?

If this is complicated with CSS, I won’t mind a jquery solution. Thanks!

Answer 1

Your #container had no position so its children didn’t know who(‘s shoes) to fill…

http://jsfiddle.net/ww7dN/1/

try adding to #container:

#container {
  position:absolute;
  height:100%;width:100%;
  left:0;top:0;
}

---

For your second question, changeoverflow:hidden to overflow:auto; to the container you want to scroll horizontally.

Update from your comment
Try adding

BODY {
  overflow-y:auto;
}

to your body‘s css