1

In the following JSFiddle: http://jsfiddle.net/TVNnT/5/

I would like my list on the right (in blue) to be visible at all times, so I've given it a position fixed so that it follows the browser's vertical scroll bar when the user scrolls down. The content in this list is dynamically added and can grow to a large list. When there isn't enough content on the page and too many items in the list, it gets cut off. How do I ensure that the items in my list are always visible? I've been playing with the CSS for a while and can't seem to figure this out.

My HTML structure:

<body>
    <div>
       <div id="mainContent">
          main content
       </div>
    </div>
    <div id="list">
        <ol>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ol>
    </div>
</body>

My CSS:

body {
    background: #1b242b;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 16px;
    overflow-y: scroll;
}
#mainContent {
    background-color: pink;
    position: relative;
    width: 300px;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-right: 10px;
    padding-left: 60px;
}
#list {
    background-color: lightblue;
    position: fixed;
    overflow: hidden;
    float: left;
    width: 150px;
    min-height: 15px;
    font-size: 15px;
    top: 20px;
    margin-left: 400px;
    padding-right: 20px;
}

What am I missing? Thanks!

http203
  • 851
  • 1
  • 11
  • 27
  • `position: fixed;` and `float: left;` together don't make sense. And if the content is longer than the viewport, how would you expect the content to fit automatically? You'll probably need JavaScript for that. – j08691 May 15 '14 at 19:18
  • Nick down there has the best CSS option, but like j08691 said, you can't just magically make a ton of text fit in a small space! – kthornbloom May 15 '14 at 19:26

2 Answers2

2

You could add 

overflow-y: auto;
height: 100%;

http://jsfiddle.net/TVNnT/7/

Not sure this is the best user experience, but it does permit the user to see all the content in that box while keeping its position fixed.

Nick Johnson
  • 190
  • 1
  • 12
0

Hi i understand your issue, but im a bit in a hurry, so i just give you a link to another similar question, hope this helps.

Have a fixed position div that needs to scroll if content overflows

otherways i will come back tomorrow ;)

edit: oh i see Nick has posted a similar answer. :)

BBallBoy

Community
  • 1
  • 1
Kjenos
  • 529
  • 2
  • 5
  • 19