Home/ Questions/Q 9257095
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T12:07:06+00:00

I am using Twitter bootstrap, and have the following two major div elements side

  • 0

I am using Twitter bootstrap, and have the following two major div elements side by side (both span6). I was wondering if there is a way that I could get element 1 (seen below) to have a fixed vertical length, while element 2 can still be allowed to scroll vertically based on the data that it needs to display, but within the visual vertical length set by element 1.

As an addendum, I have been trying to use background-color as a attribute within one of the span6 div to get the background colored, but currently its not showing anything… is there any attribute that I need to add?

Thanks! 

 ------------  ------------
|            ||            |
|   fixed    ||scroll-able |
|   element  ||  element   |
|            ||            |
|     1      ||     2      |
|            ||            |
 ------------  ------------

Addendum

Here my css:

.principal-element {
  overflow: hidden;
  background-color: #006faa;
  background-color:#C0C0C0;
  height:900px;
  position:fixed;
  float:left;
  h1 {
    color: white;
  }
}

.secondary-element {
  overflow: scroll;
}

And what shows up in the html:

<div class="container">
<div class="span6">
    <div class="principal-element">
        <h1><%= link_to "Text and stuff", "#" %></h1>
    </div>
</div>

<div class ="span6 offset6">
    <div class="secondary-element">
        <ol class="microposts">
            <li> Blah blah a lot of stuff
            </li>
        </ol>
    </div>
</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I might be completely missing a step here, but isn’t this roughly what you’re looking to achieve in the first problem?

    <html>

    <div class="element one">
        <p>content</p>
    </div>

    <div class="element two">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>

</html>

<style>

    div.element {
    width:200px;
    background-color:#C0C0C0;
    height:90px;
    color:#606060;
    font-family:Arial;
    font-size:12px;
    padding:10px;
    position:fixed;
    float:left;
    }

    div.two {
    overflow:scroll;
    margin-left:240px;
    }

</style>

    http://jsfiddle.net/QYtsr/2/

    • 0