I'm trying to fit a div with position: fixed inside another div and next to another one
<div class="container">
<div class="fixeddiv"></div>
<div class="contentdiv"></div>
</div>
My container div have a width of 1300px and should be in the middle of the paeg (margin auto)
The fixed div should be on the left side inside the container but shouldn't move when scrolling to read the bottom of the content div
I have try around with position: fixed but it always ends up on the left side and not in the middle of the page.
To illustrate what i had like i have make this picture:
Can i have suggestions how i can make this work please. My thougths are going away from position fixed and try to solve it with javascript but i had like to do it without js.
if you want the fixed div to take full height set top:0 bottom:0 and overflow-y:scroll if you want to make it scroll
for the content div just set margin-left little more then the fixed div so that it leaves some space
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 400px;
border: 1px solid red;
}
.fixeddiv {
position: fixed;
top: 0;
bottom: 0;
width: 100px;
background: blue;
overflow-y: scroll;
}
.contentdiv {
margin: 0 0 0 120px;
border:2px solid green;
}
<div class="container">
<div class="fixeddiv">
<h1>fixed div</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
<div class="contentdiv">
<h1>width auto content</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
</div>
If I understand you correctly then try something like this.
Applying position: fixed takes the DIV out of the normal flow of the document and the right column will end up stacking below the left (fixed) column. You can float the right column to the right to fix this or you could add an appropriate margin to the left side of the right column.
HTML
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
CSS
.wrapper {
width: 500px;
margin: 0 auto;
}
.left,
.right {
color: white;
}
.left {
background-color: blue;
min-height: 250px;
position: fixed;
width: 50px;
}
.right {
background-color: red;
float: right; /* or replace float with: margin-left: 100px */
min-height: 1000px;
width: 400px;
}
In the fiddles below I modified the container and column widths to better illustrate inside jsFiddle.
jsFiddle: http://jsfiddle.net/uvawqtfh/ - float version
jsFiddle: http://jsfiddle.net/uvawqtfh/1/ - margin-left version
Related
I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
I am creating a html/Angular app.
I am using Twitter bootstrap 4 for layout.
I got three columns 1-2-9 and I need them all to be 1) Same height 2) Always full height of the window.
This I solve with 100vh and it looks good BUT the problem is that since my app can add dynamic content in a long list the columns "stop" being the full height of the screen (since 100vh calculates height when first loading the page).
How can I make sure my columns always adjusts automatically to the full height of the window/browser no matter how much dynamic content I add to it?
I think you want to scroll the dynamic content within the fixed 100vh columns. If so, you can wrap the inner dynamic content within a div and use overflow properties for larger data.
Example:
HTML:
<div class="row">
<div class="col-md-1 col-lg-1 col-xl-1 column column-first">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 column column-second">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-9 col-lg-9 col-xl-9 column column-third">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
</div>
CSS:
.column{
height: 100vh;
overflow-x: hidden;
}
.scrollable-text{
width: calc(100% + 30px);
overflow-y: scroll;
box-sizing: border-box;
height: 100%;
}
.column-first{
color: #fff;
background-color: #02547D;
}
.column-second{
color: #fff;
background-color: #0285A8;
}
.column-third{
color: #fff;
background-color: #02BEC4;
}
CodePen:
https://codepen.io/debrajr/pen/gqZbpx
I have built a very basic responsive web page here:
https://codepen.io/beckytownsend/pen/wqaoRR
I want to split the main content into who sections, paragraphs on the left and the sidebar on the right when it expands past 1200px, like so..
P= paragraph, S= Sidebar
P S
P
I also want the two section to sit in the center of the page. I can't seem to figure out how to get this to work! Please could someone have a look at my code and let me know what I can do?
.main-content{
justify-content: center;
align-items: center;
display: inline-flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/*Paragraphs within main content*/
.paragraph {
float:left;
width: 60%;
order: 1;
flex-direction: column;
}
/*Sidebar*/
.sidebar {
background: teal;
float: right;
width: 30%;
order: 2;
}
<div class="main-content">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br>
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br>
Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, consequat nec purus non, volutpat egestas mauris.
</p>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Wrap the paragraphs in a new container and give that the following:
.left {
display: flex;
flex-direction: column;
}
You can then remove all the flexbox properties from the paragraph. Note that float does not work in a flex container.
.main-content {
justify-content: center;
display: inline-flex;
display: -webkit-flex;
-webkit-justify-content: center;
justify-content: center;
}
.left {
display: flex;
flex-direction: column;
padding-right: 50px;
}
/*Sidebar*/
.sidebar {
background: teal;
min-width: 30%;
}
<div class="main-content">
<div class="left">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non
euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est
lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br> Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui
sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna
ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br> Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia.
Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br> Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit
amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida
nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc,
consequat nec purus non, volutpat egestas mauris.
</p>
</div>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan
aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque
id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
I am trying to get a basic bootstrap scroll spy working on a simple page.
I have a plunk setup showing my code (and issue): http://plnkr.co/edit/qh4jJiCWY7nb7KFEE12R?p=preview
Basically I have this in my body tag.
<body data-spy="scroll" data-target="#sidebar">
<div class="container">
<div class="row">
<div class="col-xs-9">
<h2 id="section1-1">1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-2">1.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-3">1.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-1">2.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-2">2.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-3">2.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
</div>
<div class="col-xs-3" id="sidebar">
<ul class="nav nav-tabs nav-stacked affix-top" id="mynav0" data-spy="affix">
<li class="active">1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</div>
</div>
</div>
</body>
Things are working for the most part. However, the scrolling jumps from the current top bookmark to the last the second the last bookmark shows on the screen. It depends on the screen size, but on my monitor when I scroll from 1.3 to 2.1, the highlighted/active li in the nav jumps to 2.3. Even if I manually select 2.1 or 2.2 the class on the li is never changed to 'active', even if 2.3 is not viewable on the screen. If I add text to the paragraphs to make them longer then things work like expected.
How do I tell scrollspy to highlight the bookmark that is at the top of the page, rather than the bottom most bookmark? Also, why do 2.1 and 2.2 never get the 'active' class added?
I am sure its something simple but I cannot for the life of me figure out what is causing this. Any insight would be most helpful.
I have got a div [projItemsContent] that varies in height based on the contents,the problem i have got is that there are two other divs [projItemsLeft,projItemsRigh] that i want to have the same height as projItemsContent div. Any suggestions please?
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:30px;background:#990}
div.projItemsRight{float:left;width:30px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft"> </div>
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
<div class="projItemsRight"> </div>
</div>
Encapsulate the divs:
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:360px;background:#990}
div.projItemsRight{float:right;width:330px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft">
<div class="projItemsRight">
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
Right column content
<br style="clear:left;" /></div>
Left column content
<br style="clear:right;" /></div>
</div>
Google turned up this: http://matthewjamestaylor.com/blog/perfect-3-column.htm
I once used this as a guide: http://bluerobot.com/web/layouts/layout3.html
And this too is a good resource: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html