CODEWITHSUNDEEP
csslayoutpositioning
Michael macDonald
Michael macDonald

Reputation: 11

Two Column Theme, Help, to make both columns separately Scrollable

I am not sure what to do on this one, I'm not a programmer, but trying to learn CSS as this is how the theme I am using was coded in.

I've gotten quite far on my own, but this one stumps me Its two column Theme... As far as I have been able to get, I can use the following: 

#left {
   width: 235px;
   padding: 10px;
   margin-left: 20px;
   position: fixed;
   line-height: 15px;

If I change the position to Absolute, The whole page scrolls, If I leave it at Fixed, and add lets say, a Twitter feed, or other type of text that takes me past its reading where you would normally scroll, Its just cut off, cannot get to it, hightlight or scroll..

I've also toyed with the idea, of changing the theme to a 3 column theme, but Again, not a programmer, and i'd be really confused. any help would be great...

My Website is at 99lessoxygen.tumblr.com, code was found from http://nigredotheme.tumblr.com

I should note, that If its on Fixed, only the right side of page can be scrolled, and left side is locked..

Upvotes: 1

Views: 11214

Answers (2)

Jamie Collingwood
Jamie Collingwood

Reputation: 689

I believe what your looking for is overflow:auto;

You will need to remove position:fixed.

#box1 {
    height:100px;
    width:200px;
    float:left;
    overflow:auto;
}
#box2 {
    height:100px;
    width:200px;
    float:left;
    overflow:auto;
}

JSFiddle

A position of absolute will inherit an absolute position from the relative parent div.

So for instance if you have a div set to 1000 pixels and a position of relative and then insert another div inside of that div with a position of absolute and lets say right:100px it will display on the right side of the parent div 100 pixels out from the right.

Upvotes: 1

Galen
Galen

Reputation: 30170

try giving both columns a height and adding this:

overflow:auto;

This makes scrollbars appear on its container if the content overflows.

Upvotes: 0

Related Questions