I'm running into an issue where I have two navigation menu's on the same page. I want both to be shown separately in which one involves being a sticky navigation. I want this one hidden until I scroll down and cant see the other that appears. Is there a way we can make this work?
<!-- Start Sticky Navigation -->
<nav id="mainnav">
<div class="container">
<div class="row">
<div class="span4">
<img src="img/logo2.png" alt="LOGO">
</div>
<div class="span8">
<ul id="fluid-nav" class="fluid-navigation visible-desktop">
<li class="current">Top</li>
<li>Overview</li>
<li>Gallery</li>
<li>No Compromises</li>
<li><button class="btnbuy small">Select & Buy</button></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- End Sticky Navigation -->
CSS
nav#mainnav {
width: 100%;
height: 50px;
background-color: #cb0000;
overflow: hidden;
position: relative;
z-index: 999;
}
I Dont Actually get the full detail of what u What but this is Something i came up with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
</div>
<div id="float">
<div class="m">menu1</div>
<div class="m">menu2</div>
<div class="m">menu3</div>
<div class="m">menu4</div>
</div>
<div class="foot">
<div class="m">menu1</div>
<div class="m">menu2</div>
<div class="m">menu3</div>
<div class="m">menu4</div>
</div>
<div class="main">
</div>
</div>
</div>
Here is the Css
<style type="text/css">
#float{
background: #09C;
position:absolute;
right:60px;
top:20px;
width:90%;
padding:10px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
}
.m{
display: inline-block;
}
.float_content_head{
padding:10px;
border-bottom: 1px solid #efefef;
text-align:center;
}
.float_content{
padding-top:10px;
}
.main{
height: 800px;
margin: 0 auto;
border:1px solid #efefef;
padding: 10px;
background:#ccc;
}
.foot{
background:#09F;
width: 90%;
margin: 0 auto;
border:1px solid #efefef;
padding: 10px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
}
#box p{
margin:0;
padding:0;
}
</style>
And .js
<script type="text/javascript">
$(document).ready(function() {
var starting_position = $('#float').offset();
var top_padding = 20; // Distance from top while scrolling
var bottom_limit = $('.foot').offset();
var box_height = $('#float').height() + 15; // Distance from top
$(window).scroll(function(){
var top_window = $(window).scrollTop();
if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){
$('#float').stop().animate({top: top_window - starting_position.top + top_padding}, 0); //0 makes it sticky
} else if (top_window > bottom_limit.top - starting_position.top - box_height){
$('#float').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 0);
} else { $('#float').stop().animate({top: 10 }, 400);
}
});
});
</script>
And fiddle Here
You can do this easily by using position:sticky for your headers.
Here is my code:
nav {
position: sticky;
top: 0
}
/* This just makes your navbar look good as I didn't know what library you were using. */
.fluid-navigation {
margin: 0;
padding: 0;
}
.fluid-navigation li {
display: inline;
padding-left: 0.3em;
margin: 0;
}
.row {
display: flex;
flex-direction: row;
}
nav {
background: #222;
padding: 1em 0.5em;
}
.contentBody {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200vh;
}
a {
color: yellow
}
a:hover {
color: royalblue
}
body {
padding: 0;
margin: 0;
<body>
<div class="content">
<nav id="mainnav">
<div class="container">
<div class="row">
<div class="span4">
<img src="img/logo2.png" alt="LOGO">
</div>
<div class="span8">
<ul id="fluid-nav" class="fluid-navigation visible-desktop">
<li class="current">Top</li>
<li>Overview</li>
<li>Gallery</li>
<li>No Compromises</li>
<li><button class="btnbuy small">Select & Buy</button></li>
</ul>
</div>
</div>
</div>
</nav>
Scroll to the bottom
<div class="contentBody">Content 1<br>Keep Scrolling<br>Content 1<br></div>
</div>
This Navbar will push the top navbar and take its place.
<div class="content">
<nav id="mainnav">
<div class="container">
<div class="row">
<div class="span4">
<img src="img/logo2.png" alt="LOGO2">
</div>
<div class="span8">
<ul id="fluid-nav" class="fluid-navigation visible-desktop">
<li class="current">Top2</li>
<li>Overview2</li>
<li>Gallery2</li>
<li>Compromises2</li>
<li><button class="btnbuy small">Select & Buy</button></li>
</ul>
</div>
</div>
</div>
</nav>
Scroll to the bottom
<div class="contentBody">Content 2<br>Keep Scrolling<br>Peace 🖖.<br></div>
</div>
Hope this helps.
Peace 🖖.
Related
I am attempting to construct a timeline similar to the one that is shown below:
The difficulty I am having is constructing the bottom portion of the timeline that has icons connected by a single line, as well as adding the triangle to the bottom of each event. This is currently my code:
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
white-space: nowrap;
overflow: auto;
padding-left: 0;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
</li>
<div id="triangle"></div>
<div class="timeline_icon">
<img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
</li>
</ul>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
The first list element in my list is my attempt at trying to add a triangle and an icon, but I can't figure out how to position the triangle on the bottom border, and how to position the icon directly below the triangle, with a horizontal rule, or other line, between icons.
The triangle is applied as a pseudo element ::after. The image is aligned with the block - it will be much easier to manipulate. Fixed the scroll view to scroll only in X, not in Y axis. The line is an object external to the scrollview, because otherwise its length is limited to the visible area and scrolls left with the view.
.navbar {
margin-bottom: 0px;
}
.jumbotron {
margin-bottom: 0px;
}
#timeline {
list-style: none;
padding-left: 0;
padding-top: 40px;
padding-bottom: 60px;
position: relative;
}
#timeline_border {
position: relative;
top: -123px;
display: block;
width: 100%;
height: 1px;
border-top: 2px solid #ccc;
z-index: -1;
}
#timeline li {
display: inline-block;
padding: 1.5%;
border: 1px solid #c0c0c0;
border-radius: 5px;
box-shadow: 1px 1px 6px #757677;
margin-top: 2%;
text-align: center;
padding-bottom: 0;
width: 45%;
position: relative;
}
#timeline > li:after {
position: absolute;
bottom: -20px;
left: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: block;
content: "";
}
#timeline li+li {
margin-left: 2%;
}
#timeline li h3,
#timeline li em {
display: block;
}
#timeline_header {
padding-left: 0;
}
hr {
width: 100%;
}
#triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #757677;
display: inline-block;
}
.timeline_ruler {
white-space: nowrap;
overflow-x: scroll;
overflow-y: visible;
display: block;
height: auto;
padding-bottom: 100px;
}
.timeline_icon {
width: 80px;
height: 80px;
position: absolute;
bottom: -102px;
left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>LinkedIn</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Welcome!</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id="timeline_header">
<h1>What I've Been Up To</h1>
</div>
</div>
<!--Timeline-->
<div class="row" style="overflow:auto">
<hr>
<div class="timeline_ruler">
<ul id="timeline">
<li>
<h2>Job #2</h2>
<em><h4>May 2016 - Present</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Job #1</h2>
<em><h4>May 2012 - May 2016</h4></em>
<h3>Software Developer</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
<li>
<h2>Graduated from Colleg</h2>
<em><h4>May 2012</h4></em>
<h3>Bachelor's Degree</h3>
<img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt="">
</li>
</ul>
</div>
<div id=timeline_border></div>
</div>
</div>
<hr>
<footer>
<p> Copyright ©
<!--Script displays the current year-->
<script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script>
</p>
</footer>
</body>
</html>
Below print screen from google chrome html/css view.
One element under another, margin: 10px;, so they should be 20px from each other.
But they aren't. They are 10px apart, like the margins are connected.
body {
margin: 0;
background-image: url("2.png");
background-repeat: repeat-x;
font-family: 'Verdana';
font-size: 17px;
}
#logo {
background-image: url("logo.png");
width: 527px;
height: 58px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-top: 7px;
}
.hidden {
display: none;
}
.nav {
background-color: #55585d;
height: auto;
margin-top: 10px;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
}
.nav > ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav > ul li {
display: inline-block;
padding: 5px;
margin-right: 30px;
font-weight: 700;
}
/* 1195px width */
#center {
width: 1195px;
margin-left: auto;
margin-right: auto;
}
#container {
width: 864px;
min-height: 500px;
margin-left: 16px;
float: left;
}
.post {
width: 392px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
float: left;
}
#aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Devloger</title>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="hidden">Devloger</h1>
<nav>
<div class="nav">
<ul>
<li>
Strona Główna
</li>
<li>
Kategorie
</li>
<li>
Spis Treści
</li>
<li>
Współpraca
</li>
<li>
Kontakt
</li>
</ul>
</div>
</nav>
</header>
<div id="center">
<main>
<div id="container">
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="post">
</div>
<div class="clear" style="clear: both;"></div>
</div>
</main>
<aside>
<div id="aside">
<div class="abox1">
</div>
<div class="abox1">
</div>
<div class="abox1">
</div>
</div>
</aside>
</div>
<div class="clear" style="clear: both;"></div>
</body>
</html>
There are cases (you can read about it here) where margins between elements are collapsed (overlapped, one on top of the other), and this is an intended behaviour, so it's not an error.
This is one of these cases and your current issue:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
First you have some .post blocks with that margins, but these margins are working well because that blocks are floated. If you remove float: left from .post class you will see that these blocks margins are collapsed as well.
Knowing that margin collapsing exists, you can take it into account when designing layouts:
Page flow goes from left to right, top to bottom. So instead of define a margin-top and margin-bottom, define only a margin-bottom.
aside {
width: 315px;
float: left;
min-height: 500px;
}
.abox1 {
margin: 0 10px 20px 10px;
width: 279px;
height: 453px;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
}
<aside>
<div class="abox1"></div>
<div class="abox1"></div>
<div class="abox1"></div>
</aside>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm having a problem with this layout. Everything went smooth up until I got past the "section banner". Nothing will respond to CSS correctly. I can't align anything. I got the "col-md-4" to center correctly, but the header above it will not move where i want it. The only way I can get it to center is to put it in between the "row" div. But that doesnt solve the face that I can't adjust the padding/margin for it at all.
Also the footer is completely out of wack. Can't get it to center. Nothing.
html,
body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.header {
max-width: 100%;
margin: 0 auto;
}
/* Header */
.nav {
position: relative;
top: 10px;
}
.nav-pills li a {
color: #d8192f;
}
.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
background-color: rgba(216, 25, 47, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/* Jumbotron */
.jumbotron {
height: 500px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg) no-repeat center center;
background-size: cover;
height: 500px;
margin-top: 10px;
}
.jumbotron h2:first-child {
margin: 100px 0 0;
}
.jumbotron h2 {
color: white;
font-size: 60px;
text-align: right;
margin: 0;
}
/* Banner */
.banner,
.supporting {
text-align: center;
padding-top: 20px;
}
.banner {
background-color: #36343f;
height: 150px;
color: #fff;
margin-bottom: 30px;
}
.btn {
background-color: rgba(216, 25, 47, .5);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
margin-top: 10px;
}
}
/* Media Queries */
#media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.header2 h2 {
position: relative;
width: 100%;
margin: 0px 0px 0px 0px;
text-align: center;
clear: both;
}
.footer {
max-width: 33%;
margin: 0 auto;
display: inline-block;
clear: both;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<h1>BestBite</h1>
</div>
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li class="active">About
</li>
<li>Sign Up
</li>
<li>Log In
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="col-md-4">
<h2>Browse.</h2>
<h2>Create.</h2>
<h2>Share.</h2>
</div>
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
<a class="btn" href="#">Learn More</a>
</div>
</div>
<div class="section">
<div class="container">
<div class="header2">
<h2>Test</h2>
</div>
<div class="row row-centered">
<div class="col-md-4">
<h3>One</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Two</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
<div class="col-md-4">
<h3>Three</h3>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="row">
<div class="col-md-4">
<p class="a-left">One</p>
</div>
<div class="col-md-4">
<p class="a-center">One</p>
<div>
<div class="col-md-4">
<p class="a-right">One</p>
</div>
</div>
</div>
</body>
</html>
You have on extra } at your css (before the media queries).
Also, you had to set a div block with 100% width to center your footer, and add text-align: center to the child p tags.
For footer margin on large screen, just add:
.row .footer{
margin: 30px 0
}
JSfiddle: https://jsfiddle.net/1pwbhuzz/3/
With this you'll have the footer columns centered:
HTML
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
<div class="col-xs-12 col-md-4"><p>One</p></div>
</div></div>
</div>
CSS
.footer p {
text-align: center;
}
And delete the footer class in your media query.
JSFiddle.
In this SSCCE, the first div.number-outer-container renders below its parent div.step-container.
The question is that why is this happening, and what can I do to make it render vertically at the right place?
I have tried to apply a top:0 to div.number-outer-container but it does not seem to affect anything.
Note: This is just an SSCCE, actually each div.step-container is added dynamically, and any number of div.step-containers can be added.
.wrapper-big {
height: 600px;
overflow-y: auto;
width: 100%;
}
.wrapper {
height: 100%;
width: 826px;
margin: 50px auto;
display: table;
background-color: #003b80;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left-cell {
width: 50%;
background-color: chocolate;
}
.right-cell {
background-color: darkslategrey
}
.step-container {
max-height: 200px;
font-size: 0;
}
.right-cell .step-container {
margin-top: 125px;
direction: rtl;
}
.content-box {
display: inline-block;
width: 350px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
background-color: dodgerblue
}
.right-cell .content-box {
background-color: darkturquoise
}
.middle-cell {
height: 100%;
background-color: white;
width: 1.5px;
font-size: 0;
box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
-webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
display: inline-block;
/*position:absolute;*/
position: relative;
left: 390px;
}
.left-cell .number-outer-container {
/*margin-left:39px;*/
}
.left-cell .number-outer-container {
left:390px;
}
.right-cell .number-outer-container {
right:390px;
}
.number-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number-banner {
width: 50px;
height: 50px;
background-color: crimson;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
font-size:22px;
font-weight:bold;
color:white;
line-height:50px;
text-align:center;
}
.notch-outer-container {
display: inline-block;
}
.left-cell .notch-outer-container {
/*margin-right: 24px;*/
}
.right-cell .notch-outer-container {
/*margin-left: 22px;*/
}
.notch-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.notch {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.left-face-notch {
border-right: 15px solid #520f23;
}
.right-face-notch {
border-left: 15px solid #571780;
}
<div class="wrapper-big">
<div class="wrapper">
<div class="cell left-cell" align="left">
<!-- -->
<div class="step-container">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">1</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">3</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">5</div>
</div>
</div>
</div>
<!-- -->
</div>
<div class="cell middle-cell"></div>
<div class="cell right-cell" align="right">
<!-- -->
<div class="step-container" style="margin-top:125px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">2</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">4</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<!-- .wrapper -->
</div>
<!-- .wrapper-big -->
You could set position:relative to the parent container, and set position:absolute on the child element, so they will always stay together.
Read this post if you're interested in learning more about the details of how position works.
UPDATED DEMO
.cell .step-container {
position: relative;
}
.cell .number-outer-container {
position: absolute;
top: 0;
}
.left-cell .number-outer-container {
left: 390px;
}
.right-cell .number-outer-container {
left: -20px;
}
.left-face-notch,
.right-face-notch {
position: absolute;
top: 85px; /*200/2 - 30/2*/
}
Because of div.notch-outer-container and div.content-box, are taking up all the space. And since all the divs are inline-block.
If you set position:absolute; top:0; on div.number-outer-container and remove position:relative then it goes up.
http://jsfiddle.net/7dte3ru6/5/
I'm rendering with Angular.js and Bootstrap 2.3.2 a series of thumbnails in the left side of the screen, on the right side I have the larger version, at the moment I'm able to get only one scrollbar, I would like to make them independent with their own vertical scrollbar, without using the frames but only css.
HTML:
<div class="row">
<div class="span3">
<div class="thumbs-list">
<div infinite-scroll='nextThumb()' infinite-scroll-disabled='busyThumb' infinite-scroll- distance='1'>
<div class='thumb' ng-repeat='thumb in arrayOfThumbs'>
<div class="image-thumbnail">
<ul class="scrubber" style="width: 115px; height:auto; padding: 0px;">
<li style="display: block;" ng-click="viewImage(doc)">
<a href="#">
<img ng-src="{{thumb.code}}" alt="" title="Thumb 1"></img>
</a>
</li>
</ul>
</div> <!-- END image-thumbnail -->
</div> <!-- END class='thumb' -->
</div> <!-- END infinite-scroll -->
</div> <!-- END thumb-list -->
</div><!-- END span3 -->
<div class="span12">
<div class="images-list">
<div infinite-scroll='nextImage()' infinite-scroll-disabled='busyImage' infinite-scroll- distance='1'>
<div class='image-page' ng-repeat='image in arrayOfImages'>
<ul class="scrubber-page" >
<li style="display: blockImage;" ng-click="zoom(doc)">
<a href="#">
<img ng-src="{{image.code}}" alt="" title="Page 1"></img>
</a>
</li>
</ul>
</div> <!-- END class='image-page' -->
</div> <!-- END infinite-scroll -->
</div> <!-- END images-list -->
</div> <!-- END span12 -->
</div> <!-- END row -->
CSS:
.thumbs-list {
margin-top: 95px;
position: absolute;
display: block;
padding: 8px;
height: auto;
overflow:auto;
}
.image-thumbnail {
margin-top:15px;
height: auto;
overflow: auto;
text-align: center;
padding: 1em 1em;
border: 1px solid #aaa;
background: #fff;
color: #222;
border-radius: 0px;
-moz-box-shadow: 3px 3px 10px 3px #ccc;
-webkit-box-shadow: 3px 3px 10px 3px #ccc;
box-shadow: 3px 3px 10px 3px #ccc;
}
.images-list {
margin-top: 95px;
position: absolute;
display: block;
padding: 8px;
height: auto;
overflow:auto;
}
.image-page {
margin-top:15px;
height: auto;
overflow: auto;
text-align: center;
padding: 1em 1em;
border: 1px solid #aaa;
background: #fff;
color: #222;
border-radius: 0px;
-moz-box-shadow: 3px 3px 10px 3px #ccc;
-webkit-box-shadow: 3px 3px 10px 3px #ccc;
box-shadow: 3px 3px 10px 3px #ccc;
}
.scrubber-page {
height:auto;
width:auto;
overflow:auto;
}
Did you tried to set a height / width of your elements and add :
overflow: scroll;
Then you will have a scroll bar for each elements with bigger content than their size.