Skip to content

Instantly share code, notes, and snippets.

@peteplays

peteplays/position_fixed_col.html

Created July 26, 2016 23:10
Show Gist options
  • Save peteplays/5bbf3d67dfbbe5120bede3981d491032 to your computer and use it in GitHub Desktop.
Save peteplays/5bbf3d67dfbbe5120bede3981d491032 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
position_fixed_col.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="PetePlays" content="Fun with elements">
<title>Position Fixed Col</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
header{
height: 62px;
background-color: #069;
padding: 15px;
}
.starting-position{
position: relative;
}
.position-fixed{
position: fixed;
top: 60;
left: 15;
outline: 1px solid red;
}
.col-md-6{
background-color: #ccc;
outline: 1px solid #777;
}
@media screen and (max-width: 992px) {
.position-fixed {
position: relative;
}
}
</style>
</head>
<body>
<header>
<button class="btn btn-success">Why Not?</button>
<button class="btn btn-warning pull-right">Your Fav</button>
</header>
<div class="container">
<div class="row starting-position">
<div class="position-fixed">
<div class="col-md-6">
<h3>hello</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
</ul>
</div>
</div>
<div class="col-md-offset-6 col-md-6">
<h3>other</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.</li>
<li>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</li>
<li>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment