I have a webpage where I would like all the elements fixed in place so that there are no scrollbars for the page as a whole. I have a header, a menu on the left side, and an area where a plot will appear and then directly below the plot should be a list.
There is a gap between the header and the plot area that I can't get rid of. I have the margins and padding already set to 0. Also, the plot should be taking up 60% of the room below the header and the list 40%, but neither are correct and both elements end well above the bottom of the page in the vertical.
html,
body {
margin: 0;
padding: 0;
}
.float {
width: 100%;
background-color: blue;
padding-top: 60px;
display: flex;
display: -webkit-flex;
}
.main_title {
width: 70%;
height: 60px;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
flex-flow: column;
justify-content: center;
background-color: red;
}
.clock {
width: 30%;
height: 60px;
background-color: green;
}
.header {
display: -webkit-flex;
display: flex;
height: 60px;
position: fixed;
width: 100%;
background-color: red;
margin: 0;
}
.menu {
width: 130px;
flex: 0 0 130px;
background-color: yellow;
height: 100%;
position: fixed;
}
.column_main {
flex: 1;
background-color: purple;
padding-left: 130px;
float: right;
}
.plot-wrapper {
width: 100%;
background-color: brown;
height: 60%;
}
#list {
background-color: lightblue;
width: 100%;
height: 40%;
position: fixed;
}
<body>
<div class="header">
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
</body>
If I understood your right, the following is one way of doing it that does not involve using flex.
In the header, I use floats to place the two elements side by side.
I then use absolute positioning to create the .float panel, adjusting the top offset to set the top edge right below the header, and stretching it full width and to the bottom by setting all other offsets to zero.
I then use absolute positioning to place the .menu to the left, taking up the left 130px width of the block, and then simarly to create a the .column_main block such that it takes up the remainder of the space.
Within .column_main, I keep .plot-wrapper and #list as regular in-flow elements and set the heights to 60% and 40% respectively. I add overflow: auto so as to prevent any margins (on p elements for example) from collapsing and creating unwanted whitespace.
html, body {
margin: 0;
padding: 0;
}
.header {
height: 60px;
background-color: red;
overflow: auto;
}
.main_title {
float: left;
width: 70%;
height: 60px;
background-color: red;
}
.clock {
float: left;
width: 30%;
height: 60px;
background-color: green;
}
.float {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 0;
}
.menu {
background-color: yellow;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 130px;
}
.column_main {
position: absolute;
left: 130px;
right: 0;
top: 0;
bottom: 0;
background-color: purple;
}
.plot-wrapper {
overflow: auto;
background-color: brown;
height: 60%;
}
#list {
overflow: auto;
background-color: lightblue;
height: 40%;
}
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
I changed your code a bit but I was confused in your explanation, so I did this, If I am incorrect I apologize but hey I tried. :D
HTML:
<div id="page">
<header class="main-hdr">
<div>
<h1>Title</h1>
</div>
<div>00:00:00</div>
</header>
<main class="main-content">
<nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<section>
<h2>Plot</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
</section>
<aside>
<h3>Lists</h3>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</main>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
}
body {
text-align: center;
background-color: #fff;
color: #000;
font-size: 100%;
overflow: hidden; /*prevent scrollbars*/
}
header, main, section, aside, nav {
display: block;
}
#page,
.main-hdr {
width: 100%;
clear: both;
margin: 0 auto;
overflow: hidden;
}
.main-hdr {
display: flex;
}
.main-hdr div {
float: left;
}
.main-hdr div:first-child {
background-color: #aa0b6b;
width: 80%;
}
.main-hdr div:last-child {
width: 20%;
background-color: #20aa5c;
}
.main-content {
clear: both;
}
.main-content nav {
float: left;
width: 20%;
}
.main-content section {
width: 60%;
float: left;
}
.main-content aside {
width: 20%;
float: left;
}
RESULT:
EXAMPLE
Here's a plunker and a snippet below:
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
width: 100vw;
height: 100vh;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
color: #111;
background-color: lightblue;
font-variant: small-caps;
font-size: 1rem;
}
.shell {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.core {
width: calc(100% - 130px);
height: calc(100% - 60px);
background-color: blue;
left: 130px;
top: 60px;
position: fixed;
}
.title {
width: 70%;
line-height: 1;
vertical-align: central;
background-color: red;
position: fixed;
top: 14px;
}
.clock {
width: 30%;
height: 60px;
background-color: lime;
position: fixed;
right: 0;
top: 0;
}
header {
height: 60px;
width: 100%;
background-color: red;
top: 0;
left: 0;
z-index: 11;
position: fixed;
}
.menu {
width: 130px;
background-color: yellow;
height: calc(100% - 60px);
top: 60px;
left: 0;
position: fixed;
}
.plot {
width: calc(100% - 130px);
background-color: brown;
height: calc(60% - 30px);
top: 60px;
left: 130px;
position: fixed;
}
#list {
background-color: lightblue;
width: calc(100% - 130px);
height: calc(40% - 30px);
bottom: 0;
left: 130px;
padding: 20px;
position: fixed;
}
#list dd {
text-indent: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section class="shell">
<header class="header">
<h1 class="title">title</h1>
<h3 class="clock">time</h3>
</header>
<nav class="menu">
<h3>Menu</h3>
</nav>
<main class="core">
<section class="plot">
<h2>plot wrapper</h2>
</section>
<dl id="list">
<dt>List Section</dt>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
</dl>
</main>
</section>
</body>
</html>
Related
I am trying to have 2 divs on the same row, one with a title and a <hr> and the other one with an image that can be clicked to go to another page(even if I remove the link the problem persists). My expectations would be that executing this code I would get the first one starting in the top left corner followed on right by the image, but instead the first <div> just starts randomly.
#zonaTitlu {
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}
#zonaImagine {
width: 400px;
height: 400px;
display: inline-block;
}
.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}
.logo {
width: 400px;
height: auto;
}
<body style="background-color:LightGray">
<div id="zonaTitlu">
<p>
<h3>Welcome to LOL Tournaments</h3>
</p>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine">
<a href="https://eune.leagueoflegends.com/ro/">
<img class="logo" src="lol-logo.jpg" alt="LOL logo">
</a>
</div>
</body>
If you want both div side by side mean try this and change the image width to 100%
.zona{
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#zonaTitlu {
width: 50%;
height: 200px;
display: inline-block;
background-color: red;
}
#zonaImagine {
width: 50%;
height: 400px;
display: inline-block;
}
.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}
.logo {
width: 400px;
height: auto;
}
<body style="background-color:LightGray">
<div class="zona">
<div id="zonaTitlu">
<h3>Welcome to LOL Tournaments</h3>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine">
<a href="https://eune.leagueoflegends.com/ro/">
<img class="logo" src="lol-logo.jpg" alt="LOL logo">
</a>
</div>
</div>
</body>
While I like the other solutions (flexbox especially). OP seems to have a simple problem to fix - inline-block alignment default to baseline (bottom) and the content within the first div is what's being aligned with the bottom of the image. You see the hr is lined up with the bottom of the image.
Adding vertical-align: top; on either inline-block element fixes this and they will align at the top. Here is a good SO post on all the above behavior:
My inline-block elements are not lining up properly
I don't know what you're trying to do with fixed widths so I'm not going to offer other solutions with responsive design and whatnot - this is the straight answer to your question.
#zonaTitlu {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
vertical-align: top; // added this
}
#zonaImagine {
width: 140px;
height: 100px;
display: inline-block;
}
.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}
.logo {
width: 400px;
height: auto;
}
<body style="background-color:LightGray">
<div id="zonaTitlu">
<p>
<h3>Welcome to LOL Tournaments</h3>
</p>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine">
<a href="https://via.placeholder.com/350x150">
<img class="logo" src="https://via.placeholder.com/140x100" alt="LOL logo">
</a>
</div>
Now you can adjust all things separately. TH HR is a bit outdated. It also will force a line break. I add a underline to the h3 which would do same i thing. But for completeness i add also a HR which can now be placed also individual by css.
Same for the image. - It depends a bit on the image size how to do adjustments.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style>
#zonaTitlu {
width: 400px;
height: 200px;
display: inline-block;
background-color: red;
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
#zonaImagine {
width: 400px;
height: 400px;
display: inline-block;
}
.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}
.underlined {
text-decoration: underline;
}
.logo {
position: relative;
width: 400px;
height: auto;
top: 5px;
}
.spacer {
display: inline-block;
width: 30px;
}
.hr {
position: relative;
top: 60px;
width: 400px;
left: 0px"
}
.para {
position: relative;
width: 380px;
top: 15px;
}
</style>
<style type="text/css">
body.c1 {
background-color: LightGray
}
</style>
</head>
<body class="c1">
<h3 class="underlined">Welcome to LOL Tournaments <a class="logo" href="https://eune.leagueoflegends.com/ro/"><img class="logo" src="lol-logo.jpg" alt="LOL logo"></a></h3>
<div id="zonaTitlu">
<hr class="hr">
</div>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem, si
tibi illa probabantur, cur non propriis verbis ea tenebas? Mihi enim satis est, ipsis non satis. <i>Eiuro,
inquit adridens, iniquum, hac quidem de re;</i> Duo Reges: constructio interrete.</p>
</body>
</html>
Looks right to me . You can try using a table if required.The div can be removed
here is a working example using flex-box
<body style="background-color:LightGray">
<div id="container">
<div id="zonaTitlu" class="box">
<p>
<h3>Welcome to LOL Tournaments</h3>
</p>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine" class="box">
<a href="https://eune.leagueoflegends.com/ro/">
<img class="logo" src="lol-logo.jpg" alt="LOL logo">
</a>
</div>
</div>
</body>
<style>
/*
#zonaTitlu {
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}
#zonaImagine {
width: 400px;
height: 400px;
display: inline-block;
}
*/
#container {
display: flex;
flex-direction: row;
}
.box {
width: 400px;
height: 400px;
border: 1px solid black;
}
.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}
.logo {
width: 400px;
height: auto;
}
</style>
I am having a really difficult time trying to figure out why this is happening before I move further along in my development process of this page.
I have a very basic setup:
Fixed Footer
Fixed Header
A col-lg-3 nav bar
A col-lg-9 content box
The problem I am having is the div widths inside the nav col-lg-3 are not taking up the full width of the parent div. They appear to want to sit next to each other., even though I haven't declared a float -- and I have even tried clear:both between them. The div with ID of projects is supposed to be below the div with ID problem-div What am I doing wrong, or not understanding in order for this to happen?
NOTE The reason I am assuming this is a Bootstrap issue, is because if I remove the links to the CDN, the html / css functions as expected.
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
This is not bootstrap related. If you remove it you will get the same issue:
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
And this is due to the use of display:flex within #info-column. The default direction is row making both child divs next to each other. Switch to a column direction or simply remove display:flex
html,
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.main-wrapper {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
position: fixed;
height: 70px;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
display: flex;
color: #ED6F2B;
text-align: center;
}
#footer {
position: fixed;
height: 70px;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
#info-column {
float: left;
display: flex;
flex-direction:column;
background-color: #CCC;
margin-top: 70px;
overflow-x: hidden;
overflow-y: scroll;
height: calc(100% - 140px);
}
#map-column {
float: left;
display: flex;
background-color: #93E7ED;
margin-top: 70px;
overflow: hidden;
height: calc(100% - 140px);
}
<div id="header">
HEADER
</div>
<div class="main-wrapper">
<div id="info-column" class="col-lg-3">
<div id="problem-div" class="text-center">
<div>
<img style="width:45%" alt="" src="logo.png">
</div>
<div>
<h2>THIS PERSON'S COMPANY AND SERVICES</h2>
</div>
<div>(555) 555-5555</div>
<div>person#thispersonscompanyandservices.com</div>
<div>thispersonscompanyandservices.com</div>
</div>
<div id="projects">
PROJECTS
</div>
</div>
<div id="map-column" class="col-lg-9">
MAP CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
What I have
A header that is fixed
Inside the header is a piece of text in the top right
When I click on the text an absolute positioned div appears underneath it with some 'options'
In the main content I also have a column on the right that's fixed with a button inside
The Issue
When clicking the text to display the absolute position div 'overlay', the button appears 'on top' of it.
Question
How do I ensure that when I click the text and the additional panel appears, that it appears on top of everything else?
Some quick code to demonstrate
If you click on the text in the top right, you'll see the issue.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
<div class="text">
<span> Some text </span>
<div class="dropdown">
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
Set your z-index of your header class lets say 1001 and then set z-index:1000 action class.
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
z-index:1001;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
z-index:1000; /* less then the header*/
}
Hope this helps.
$('.text').click(function(){
$('.dropdown').toggle();
});
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
}
.header {
width: 100%;
height: 70px;
position: fixed;
background: #ebebeb;
}
.text {
width: 200px;
float: right;
position: relative;
}
.text .dropdown {
z-index:100;
width: 100%;
position: absolute;
top: 65px;
right: 0;
background: #888;
display: none;
}
.text .dropdown ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.content {
width: 100%;
height: 100%;
float: left;
margin-top: 80px;
}
.content .right-col {
width: 30%;
height: 200px;
float: right;
background: #ebebeb;
}
.content .actions {
width: 100%;
position: fixed;
top: 80px;
right: 10px;
}
.content .button {
padding: 20px;
float: right;
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header" style="z-index:199;">
<div class="text">
<span> Some text </span>
<div class="dropdown" >
<ul>
<li> Text </li>
<li> Text </li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="right-col">
<div class="actions">
<div class="button"> Button </div>
</div>
</div>
</div>
</div>
<div class="header" style="z-index:199;">
I am trying to align to divs parallel from each other, but it is not lining up properly.
I have already tried a number of the solutions posted on the site, but none of them are working.
Any ideas on how to resolve this issue would be appreciated.
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10">
<div class="content">
<div class="wrapper">
<p class="content-media left">
<img src="http://lorempixel.com/g/400/200/" alt="">
</div>
<div>
<div class="col-xs-12">
<div class="float:right;width:45%;">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum</em>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
body {
font-family: georgia, "times new roman", times, serif
}
.container {
width: 100%;
}
.container p,
.container div img {
display: inline-block;
}
.container p {
width: 60%;
float: right;
}
.container div img {
width: 38%;
float: right;
}
.logo {
position:fixed;
bottom: 25px;
left: 0px;
height: 100px;
width: 300px;
}
p {
font-size: 18px;
line-height: 22px;
margin-right: 360px;
right: 100px;
}
.dropcap {
float: left;
font-size: 76px;
line-height: 76px;
margin: 0 15px 5px 0;
}
.section {
background-color: #fff;
position: relative;
z-index: 10;
}
.section-header {
margin-top: 50px
!important;
z-index: 1;
}
.section-header-content {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.main-title {
position: fixed;
bottom: 400px;
left: 200px;
color: white;
}
.section-header-content2 {
position: fixed;
bottom: 50px;
left: 200px;
color: white;
}
.main-title2 {
position: fixed;
bottom: 400px;
right: 200px;
color: white;
}
.section-video-bg {
margin-top: -10px;
}
.content {
padding: 40px 0 25 ;
}
.content h3 {
font-size: 27px;
line-height: 27px;
margin: 70px 0 30px 0;
}
.content .content-media {
width: 40%;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding: 30px 0;
}
.content .content-media.right {
float: right;
margin-left: 20px;
}
.content .content-media.left {
float: right;
margin-right: 800px;
bottom: 600px;
}
.content .content-media img {
max-width: 100%;
}
.column {
float: left;
width: 50%;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container video {
position: relative;
z-index: 0;
top: 0;
bottom: 0;
}
.video-container video.fixed {
position: fixed;
top: 50px;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.wrapper {
margin: 0 auto;
width: 960px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
}
You have a lot of stray divs on your html as well as a lot of css properties not needed (e.g. float property) which are already done by bootstrap's default css.
Here is the correct way to nest your div columns within a row:
<section class="section">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="content">
<div class="wrapper">
<img src="http://lorempixel.com/g/400/200/" class="img-responsive" alt=""/>
</div>
</div>
</div>
<div class="col-xs-6">
<p>Lorem Ipsum <em>Lorem</em>, Lorem impsum Lorem Ipsum Lorem Ipsum.</p>
</div>
</div>
</div>
</section>
Here is a jsfiddle with the above code: http://jsfiddle.net/AndrewL32/623ftfc2/
Your HTML is not properly formatted
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-6">
<img class="img-responsive" src="http://lorempixel.com/g/400/200/">
</div>
<div class="col-xs-2 col-sm-2 col-md-6">
<p>Lorem Ipsum</p>
</div>
</div>
https://jsfiddle.net/j0m6ddpo/1/
I need to hide the .content-section when going out the limit of #page.
I need to use overflow:hidden; but I cannot get the desired result applying on #page.
Any idea how to fix it?
http://jsfiddle.net/Pet8X/1/
<div id="btn-up" onclick="moveUp();">UP</div>
<div id="btn-down" onclick="moveDown();">DOWN</div>
<div id="page">
<div id="bar-header">Header</div>
<div id="content">
<div class="content-section item1 ">
<a name="anchor-1"></a>
<h2>Content 1</h2>
</div>
<div class="content-section item2">
<a name="anchor-2"></a>
<h2>Content 2</h2>
</div>
<div class="content-section item3">
<a name="anchor-3"></a>
<h2>Content 3</h2>
</div>
<div class="content-section item4">
<a name="anchor-4"></a>
<h2>Content 4</h2>
</div>
</div>
<div id="bar-footer">Footer</div>
</div>
/*resetter */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: transparent;
width: 500px;
height: 200px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#bar-header, #bar-footer {
position: fixed;
left: 0px;
width: 500px;
height: 30px;
z-index: 100;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
#bar-header {
top: 0px;
}
#bar-footer {
top: 690px;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 50px;
}
/* content sizes */
.item1 { /* top is 0 */
height: 200px;
}
.item2 { /* top is 200 */
height: 400px;
}
.item3 { /* top is 600 */
height: 600px;
}
.item4 {
height: 800px;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
You are referencing the ID of the sidebar container incorrectly.
Your rule states
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
But there is no element #content-inner.
Use this instead:
#content{
position: fixed;
overflow: hidden;
}
This results in:
Fiddle
Just apply overflow-hidden to #content
#content{
position: fixed;
overflow: hidden;
}