CODEWITHSUNDEEP
jqueryhtmlcss
Cris
Cris

Reputation: 4044

Full height columns with CSS?

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!

Upvotes: 1

Views: 109

Answers (3)

d-_-b
d-_-b

Reputation: 23201

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

Upvotes: 3

Zyga
Zyga

Reputation: 2427

Try changing below CSS like this:

#public {
position: absolute;
width:100%;
height:100%;
color:#fff;
}
#public #container {
height:100%;
}

Also, overflow: hidden prevents the scrollbar to appear.

Upvotes: 1

BurebistaRuler
BurebistaRuler

Reputation: 6529

Give a position:absolute to left div;

Upvotes: 0

Related Questions