I am trying to make my website's navbar resize when the window is resized. My current code works fine until a point where the window width is too small and the navbar becomes two rows and looks bad. This is my code for the main part of my website.
What I would like it to do is switch from a horizontal navbar to a vertical navbar when the width is too small for everything (this would be mostly for mobile users) and I am not sure how to do that.
I would also like to make the navbar sticky and have tried some tutorials but cannot seem to get any to work on this website.
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght#300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>
Web_Title
</title>
<head>
<body>
<header>
<div class="container">
<img src="src" alt = "logo" class = "logo" width="150" height="50">
</div>
<nav>
<ul>
<li>Home</li>
<li>Video Archive</li>
<li>Text Archive</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</head>
</html>
My code for the css is below:
body {
margin: 0;
background: #222;
font-family: 'Flamenco', cursive;
font-weight: 900;
}
header {
background: #ffffff
}
header::after{
content:'';
display:table;
clear: both;
}
.logo{
float:left;
padding: 0px 0;
}
nav{
float: left;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 15px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color: rgb(20, 20, 38);
}
nav a::before{
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top:0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
You can use #media in CSS to do this
body {
margin: 0;
background: #222;
font-family: 'Flamenco', cursive;
font-weight: 900;
}
header {
background: #ffffff
}
header::after{
content:'';
display:table;
clear: both;
}
.logo{
float:left;
padding: 0px 0;
width: 180px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 15px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color: rgb(20, 20, 38);
}
nav a::before{
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top:0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
nav{
float: left;
}
#media only screen and (max-width: 400px) { /* smaller screen*/
.logo {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght#300&display=swap" rel="stylesheet">
<title>
Web_Title
</title>
<head>
<body>
<header>
<div class="container">
<img src="src" alt = "logo" class = "logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Video Archive</li>
<li>Text Archive</li>
<li>About</li>
</ul>
</nav>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus magna et commodo faucibus. Ut viverra efficitur orci ut efficitur. Donec porta neque ac pretium lobortis. Maecenas gravida non tellus nec maximus. Pellentesque magna urna, rhoncus in lectus id, varius aliquet sapien. Maecenas augue purus, eleifend quis sagittis in, rhoncus sit amet dolor. Etiam sed quam sit amet tortor suscipit efficitur id eu ex. Ut eu odio hendrerit, eleifend massa in, malesuada quam. Duis cursus non est quis pretium. Sed tempus arcu sit amet erat aliquet, nec tincidunt lorem feugiat. Nunc nec ipsum consequat, maximus dolor sed, tempus risus. Aenean aliquet sem quis purus euismod, at sodales velit ullamcorper.
Pellentesque accumsan suscipit sem, ac ullamcorper libero cursus pretium. Aenean semper sodales tortor a finibus. Maecenas sit amet egestas tortor. Etiam molestie imperdiet maximus. Maecenas a lacus est. Pellentesque purus orci, rutrum ut vehicula at, fringilla eget ligula. Donec sem velit, commodo eu tincidunt id, accumsan sed leo.
Quisque at risus sit amet urna efficitur bibendum. Aliquam eu sagittis erat. Fusce finibus orci at nulla rutrum, quis laoreet purus congue. Aliquam aliquam fermentum erat vitae luctus. Sed vitae lacus finibus, lacinia risus quis, molestie eros. Vestibulum ullamcorper, lacus sit amet eleifend commodo, est tellus aliquam ante, et hendrerit ante velit sed libero. Praesent aliquet nisi semper pharetra suscipit. Aliquam fermentum a turpis eu congue. Integer nec arcu sed tellus dapibus pretium. Proin posuere urna turpis, volutpat sollicitudin sem sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut pharetra molestie nisl vitae feugiat. Nulla accumsan vulputate sagittis. Sed quis erat dictum, tempor leo nec, posuere velit. Duis consectetur metus sit amet odio bibendum egestas sed id arcu. Maecenas vehicula, justo non condimentum vestibulum, elit justo pharetra sapien, nec fermentum diam lorem ac felis. Morbi ut sem leo. Nunc ac ante quam. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tempus ex velit, varius fringilla nisi semper ut. Etiam sed eleifend augue, ut mattis eros. Sed sodales libero ex, et molestie velit pellentesque nec. Morbi ac ligula quis dui dapibus ornare. Duis at est non nibh scelerisque cursus vel in massa. Suspendisse pretium, mi quis cursus varius, ipsum enim suscipit nibh, non sollicitudin est odio vitae est. Quisque bibendum vehicula nibh, vel accumsan purus lacinia eu.
Duis vel feugiat dolor, non dignissim arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis eget nibh et interdum. Aliquam erat volutpat. Quisque tempus justo augue, vitae pharetra magna ultrices ut. Quisque id scelerisque felis. Pellentesque sed elementum enim. Duis elementum sem sed neque malesuada, nec consectetur nulla finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum massa eget arcu pharetra vulputate. Sed id nisl ac turpis tempus hendrerit ut in ligula. Ut imperdiet porta mauris, vitae fringilla augue auctor vel.
</p>
</body>
</head>
</html>
The #media CSS rule only adds the styling to the page if the rules in place are met. #media max-width: 400px only adds the styling if the width is under 400px wide.
Sticky positioning usually has issues like this and there are usually no fixes. You can probably use fixed position and add lots of padding to the top of the page so content doesn't get lost under the navbar.
I used Lorem Ipsum to simulate content so you can play around with fixed positioning.
I have noticed that you are using float to have your logo on the right and nav on the left and I advise you to use float because it make it easier when the screen is resizing.
Your code would be like:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
The justify-content attribute will allow you to specify how the content inside header is going to be distributed and align-items: center allows you to align items center vertically.
The Vertical Navbar issue
Here you can use media queries to handle the problem.
If you do not know what media quires are it is a way to run css code for a specific width range of the device screen e.g for mobile only.
To implement this lets say for widht range below 400px see the example below:
#media (min-width){
/* specify your code here */
/* this is assuming you coded for mobile first*/
}
#media (max-width){
/* specify your code here*/
/ this is assuming you coded for desktop first*/
}
I recommend looking into Media Queries.
W3School tutorial for Media Queries
With #media, you can make changes to the styling when screen size changes. These are called breakpoints. You can for example say max-width, which applies when screen width is less than given amount and min-width, which applies when screen size is bigger than given amount.
For example, when screen size changes, we are changing the background color of the body:
/* This applies when screen size is more than 600px */
#media screen and (min-width: 600px) {
body {
background-color: red;
}
}
/* This only applies when screen size is less than 600px */
#media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
/* This only applies when screen size is less than 400px */
#media screen and (max-width: 400px) {
body {
background-color: green;
}
}
<h1>Change the size of the screen to see the effect</h1>
If you need help applying it to your code I will gladly help, but give it a try first =)
Related
I'm making a website where there is a picture on the left of a big pile of text. There's two sections of these, meaning there's two pictures on the left section, and text on the right. Like this
The first image at the top is slightly too far to the left than the one on the bottom. On laptop view, it's not noticeable. However, on the ipad view, a portion of the image is off screen.This is what it looks like, and THIS is what it should look like.
The messed up img's class = "2yb". It has no padding except the top. The text has no padding either.
The image has space to move, demonstrated by the purple shade around the image, which represents space/area that the img can move in.
html & css code of the img:
<div class="wrapper">
<section class="article">
<div class="image-holder">
<img class="img-2yb" src="https://via.placeholder.com/720x585" alt="img beside ig"> <!-- top img. the messed up one-->
</div>
<div class="img-info">
<h3>Satec #WA Porter</h3>
<p style="color:#89a227"><i>Class of 2023 </i></p>
<p class ="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ipsum diam, et viverra justo pretium et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nullam sed est lorem. <br><br> Mauris laoreet ut leo at ornare. In gravida porta tellus non volutpat. Integer tristique, erat sit amet venenatis porttitor, turpis nunc venenatis leo, vitae tincidunt velit ex non turpis. Sed suscipit mauris vel bibendum auctor. Nunc commodo
elementum urna vel luctus. Curabitur tincidunt dolor vel viverra hendrerit.
<br><br> Vivamus malesuada purus nec enim tempus, nec tincidunt lorem lobortis. Praesent congue dolor nisl, quis pharetra nisl facilisis a. Aenean pretium, nulla et cursus tristique, ex velit vehicula magna, in tempus tortor nunc quis est. Aenean
sagittis augue eget elit ornare, id suscipit est ultrices.
<br><br> Sed ligula nisl, ullamcorper vitae mi id, egestas blandit dolor. Nam ac feugiat dolor, a dictum turpis. Cras sed urna eu augue tristique aliquet viverra ut magna. Phasellus dapibus lectus ut felis ultrices egestas. In consequat, ipsum id
luctus scelersque, magna lectus tincidunt dolor, in dapibus nulla mauris in massa. Nulla rutrum, quam et hendrerit pulvinar, nibh.
<br><br>
</p>
</div>
</section>
css:
#media only screen and (min-width:800px) { /* tablet styling 800px */
.wrapper {
width: 800px;
margin: 0 auto;
}
.article { /* class for <section> tag. wraps around all text & img for each section or mai journey */
display: flex;
justify-content: space-around;
}
.image-holder { /* class for all the images used. they're wrapped in a div */
width: 25%;
padding-right: 0%;
}
.img-info { /* tag for all text under my journey section */
width:70%;
}
.img-info h3{ /* tag for all text under my journey section */
padding:40px 0px 0px 30px;
font-family:'charukola-unicode-regular', sans-serif;
font-size: 25px;
}
.img-info h2{/* tag for all text under my journey section */
text-align:center;
padding-top:100px;
padding-bottom:50px;
font-family: 'charukola-unicode-regular', sans-serif;
font-size: 40px;
line-height: 60px;
}
.img-info p{/* tag for all text under my journey section */
padding: 20px 0px 0px 30px;
font-family: 'charukola-unicode-regular', sans-serif;
font-size: 16px;
color: #50555c;
line-height: 30px;
}
.img-2yb { /*satec #WA porter img */
width: 100%;
}
}
I heard from another user on stack overflow that that it has something to do with the justification rule & width proportion. I played around with both, but it just seemed to squish text in and not actually move the image.
Apologies for the wall of text lol. I tried including the important css styling and html.
Thank you for any advice or help! :)
I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>
That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
#media (max-width: 505px) {
main {
margin-top: 3em;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>
I've been working on a singlepage site with full width
but I just can't get it to work as I want to.
What I need is to figure out how to make each section containing
full width
background image full width
height of the div should be at least the same as the image, but if the text overflows then height changes
text I can place as I like (with margin/top)
At the moment the site looks alright, just not for cellphones due to the text
http://www.teknologitalenter.dk
.row {
margin: 5px 0px;
}
.row:first-of-type {
margin-top: 0px;
}
.row:last-of-type {
margin-bottom: 0px;
}
.row > div > div {
position: absolute;
}
.row .padding-0 {
padding: 0px;
}
.row > div > div h1 {
font-size: 1em;
font-size: 10px;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 0.7em;
font-weight: normal;
}
/* Small devices (tablets, 450px and up) */
#media (min-width:450px) {
.row > div > div h1 {
font-size: 1em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li{
font-size: 0.7em;
font-weight: normal;
}
blockquote footer {
font-size: 0.5em;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
.row > div > div h1 {
font-size: 1em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 0.9em;
font-weight: normal;
}
blockquote footer {
font-size: 0.7em;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.row > div > div h1 {
font-size: 1.6em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 1.2em;
font-weight: normal;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.row > div > div h1 {
font-size: 2em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 1.4em;
font-weight: normal;
}
}
/* extra small devices (phones, 450px and down) */
#media (max-width:450px) {
.row#intro > div > div {
bottom: 10%;
left: 10%;
}
.row#om > div > div {
bottom: 3%;
left: 10%;
width: 70%;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 4px;
}
.row > div div p {
font-size: 0.5em;
}
}
/* Small devices (tablets, 450px and up) */
#media (min-width:450px) {
.row#intro > div > div {
bottom: 5%;
left: 5%;
}
.row#om > div > div {
bottom: 5%;
left: 5%;
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 4px;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.row#intro > div > div {
bottom: 10%;
left: 10%;
}
.row#om > div > div {
bottom: 10%;
left: 10%;
width: 50%;
background-color: transparent;
padding: 0px;
color: black;
}
}
<div id="intro" class="row">
<div class="col-sm-12 padding-0">
<img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
<div>
<h1>
Header
</h1>
<p>Sub header.</p>
</div>
</div>
</div>
<div class="row" id="om">
<div class="col-sm-12 padding-0">
<img class="img img-responsive" src="http://teknologitalenter.dk/img/oculus.jpg" />
<div>
<p>
Section text
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pulvinar nisi sed sagittis. Donec ultricies id leo a ultricies. Praesent nunc ex, commodo vel vestibulum mollis, pretium vel purus. Donec suscipit nulla est, interdum varius risus sollicitudin vel. Cras tortor neque, vehicula non massa in, iaculis scelerisque ipsum. Cras vel dignissim lorem. Morbi pellentesque orci nec nulla vehicula, ac condimentum lectus scelerisque. Sed dolor arcu, condimentum sagittis nisi quis, mollis convallis nunc. Mauris mollis, lacus non interdum faucibus, ligula leo faucibus mauris, nec sodales lectus nulla sit amet mauris. Sed non viverra lectus. Maecenas at fringilla felis.
In iaculis tellus eu felis placerat, et aliquet augue rutrum. Praesent lectus diam, blandit sed vehicula at, venenatis quis lorem. Nunc auctor pretium odio, ac rutrum diam ullamcorper ut. Proin vitae ornare magna. In sapien risus, dapibus id sagittis at, gravida et leo. Fusce lectus neque, mattis eget magna non, iaculis laoreet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus lacus, ut efficitur ligula. Nunc vel justo condimentum, ullamcorper erat ut, sollicitudin ante. Sed nec ornare sapien. Praesent non neque quam. Aenean eget justo sodales, vehicula ex sit amet, cursus nisl. Integer suscipit massa commodo, accumsan dolor eget, condimentum dolor.
Cras ut dolor sed purus elementum ornare. Fusce posuere suscipit nulla, sed efficitur mauris pellentesque eget. Mauris molestie pulvinar sapien tempor vehicula. Pellentesque volutpat laoreet arcu sit amet iaculis. Pellentesque semper, mi vitae placerat tincidunt, arcu nulla maximus dui, viverra ultrices sapien nibh in lectus. Etiam scelerisque elit erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel maximus ipsum, a vehicula enim. Phasellus eu velit quis arcu dapibus posuere.
Phasellus arcu felis, tristique ac cursus non, iaculis nec sem. Nullam fermentum ligula vel nisi condimentum maximus. Donec pulvinar auctor est. Sed justo diam, dignissim quis bibendum vel, pharetra in lectus. Morbi molestie dolor eu posuere tempus. Curabitur maximus sem sit amet semper dignissim. Cras vehicula, purus sed volutpat molestie, ex purus ultrices dolor, eu suscipit sem dolor ac ante. Aliquam elementum arcu ac lacus faucibus iaculis. Sed faucibus arcu sed nisi ultricies commodo. Donec erat diam, aliquet vitae lacus quis, tincidunt pellentesque purus. Ut vulputate lectus leo. Duis varius dapibus orci. Etiam semper est ac semper aliquam. Ut sollicitudin, tortor sed imperdiet pharetra, nisi leo faucibus turpis, pretium euismod urna felis quis leo. Aenean hendrerit ante quis euismod porttitor. Integer interdum ex vitae lacus suscipit consequat.
Aliquam venenatis nibh non nisi ullamcorper, at molestie ipsum consectetur. Nulla tempor felis eu tellus molestie, eget pretium dolor vehicula. Morbi ultricies elit leo, sagittis malesuada risus feugiat vel. Curabitur pretium, enim non finibus malesuada, neque velit suscipit tellus, non varius nunc ante vitae nisi. Sed pulvinar, neque non dignissim tincidunt, velit purus suscipit nibh, ac finibus sapien tortor quis turpis. Proin at justo vel nulla finibus fringilla vel id augue. Nulla in erat auctor, rutrum quam vitae, faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ornare turpis.
</p>
</div>
</div>
</div>
I hope someones out there who got an idea to what i can do. I know its possible since i've done this loads of times before, I've just forgot how
I have made a change on the css for row and text containing div. If i got your question correct.
.row {
margin: 5px 0px;
}
.row:first-of-type {
margin-top: 0px;
}
.row:last-of-type {
margin-bottom: 0px;
}
.row > div > div {
position: absolute;
top: 80px;
display: block;
bottom: initial !important;
}
.row .padding-0 {
padding: 0px;
position: relative;
}
.row > div > div h1 {
font-size: 1em;
font-size: 10px;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 0.7em;
font-weight: normal;
}
/* Small devices (tablets, 450px and up) */
#media (min-width:450px) {
.row > div > div h1 {
font-size: 1em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li{
font-size: 0.7em;
font-weight: normal;
}
blockquote footer {
font-size: 0.5em;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
.row > div > div h1 {
font-size: 1em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 0.9em;
font-weight: normal;
}
blockquote footer {
font-size: 0.7em;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.row > div > div h1 {
font-size: 1.6em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 1.2em;
font-weight: normal;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.row > div > div h1 {
font-size: 2em;
font-weight: bold;
}
.row > div > div p, .row > div > div ul li {
font-size: 1.4em;
font-weight: normal;
}
}
/* extra small devices (phones, 450px and down) */
#media (max-width:450px) {
.row#intro > div > div {
bottom: 10%;
left: 10%;
}
.row#om > div > div {
bottom: 3%;
left: 10%;
width: 70%;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 4px;
}
.row > div div p {
font-size: 0.5em;
}
}
/* Small devices (tablets, 450px and up) */
#media (min-width:450px) {
.row#intro > div > div {
bottom: 5%;
left: 5%;
}
.row#om > div > div {
bottom: 5%;
left: 5%;
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px;
border-radius: 4px;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width:768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.row#intro > div > div {
bottom: 10%;
left: 10%;
}
.row#om > div > div {
bottom: 10%;
left: 10%;
width: 50%;
background-color: transparent;
padding: 0px;
color: black;
}
}
<div id="intro" class="row">
<div class="col-sm-12 padding-0">
<img class="img img-responsive" src="http://teknologitalenter.dk/img/villiam.jpg" />
<div>
<h1>
Header
</h1>
<p>Sub header.</p>
</div>
</div>
</div>
<div class="row" id="om">
<div class="col-sm-12 padding-0">
<img class="img img-responsive" src="http://teknologitalenter.dk/img/oculus.jpg" />
<div>
<p>
Section text
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis pulvinar nisi sed sagittis. Donec ultricies id leo a ultricies. Praesent nunc ex, commodo vel vestibulum mollis, pretium vel purus. Donec suscipit nulla est, interdum varius risus sollicitudin vel. Cras tortor neque, vehicula non massa in, iaculis scelerisque ipsum. Cras vel dignissim lorem. Morbi pellentesque orci nec nulla vehicula, ac condimentum lectus scelerisque. Sed dolor arcu, condimentum sagittis nisi quis, mollis convallis nunc. Mauris mollis, lacus non interdum faucibus, ligula leo faucibus mauris, nec sodales lectus nulla sit amet mauris. Sed non viverra lectus. Maecenas at fringilla felis.
In iaculis tellus eu felis placerat, et aliquet augue rutrum. Praesent lectus diam, blandit sed vehicula at, venenatis quis lorem. Nunc auctor pretium odio, ac rutrum diam ullamcorper ut. Proin vitae ornare magna. In sapien risus, dapibus id sagittis at, gravida et leo. Fusce lectus neque, mattis eget magna non, iaculis laoreet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus lacus, ut efficitur ligula. Nunc vel justo condimentum, ullamcorper erat ut, sollicitudin ante. Sed nec ornare sapien. Praesent non neque quam. Aenean eget justo sodales, vehicula ex sit amet, cursus nisl. Integer suscipit massa commodo, accumsan dolor eget, condimentum dolor.
Cras ut dolor sed purus elementum ornare. Fusce posuere suscipit nulla, sed efficitur mauris pellentesque eget. Mauris molestie pulvinar sapien tempor vehicula. Pellentesque volutpat laoreet arcu sit amet iaculis. Pellentesque semper, mi vitae placerat tincidunt, arcu nulla maximus dui, viverra ultrices sapien nibh in lectus. Etiam scelerisque elit erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel maximus ipsum, a vehicula enim. Phasellus eu velit quis arcu dapibus posuere.
Phasellus arcu felis, tristique ac cursus non, iaculis nec sem. Nullam fermentum ligula vel nisi condimentum maximus. Donec pulvinar auctor est. Sed justo diam, dignissim quis bibendum vel, pharetra in lectus. Morbi molestie dolor eu posuere tempus. Curabitur maximus sem sit amet semper dignissim. Cras vehicula, purus sed volutpat molestie, ex purus ultrices dolor, eu suscipit sem dolor ac ante. Aliquam elementum arcu ac lacus faucibus iaculis. Sed faucibus arcu sed nisi ultricies commodo. Donec erat diam, aliquet vitae lacus quis, tincidunt pellentesque purus. Ut vulputate lectus leo. Duis varius dapibus orci. Etiam semper est ac semper aliquam. Ut sollicitudin, tortor sed imperdiet pharetra, nisi leo faucibus turpis, pretium euismod urna felis quis leo. Aenean hendrerit ante quis euismod porttitor. Integer interdum ex vitae lacus suscipit consequat.
Aliquam venenatis nibh non nisi ullamcorper, at molestie ipsum consectetur. Nulla tempor felis eu tellus molestie, eget pretium dolor vehicula. Morbi ultricies elit leo, sagittis malesuada risus feugiat vel. Curabitur pretium, enim non finibus malesuada, neque velit suscipit tellus, non varius nunc ante vitae nisi. Sed pulvinar, neque non dignissim tincidunt, velit purus suscipit nibh, ac finibus sapien tortor quis turpis. Proin at justo vel nulla finibus fringilla vel id augue. Nulla in erat auctor, rutrum quam vitae, faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ornare turpis.
</p>
</div>
</div>
</div>
I have a web site with fixed background image.
When scrolling, This image is recovered by a text block.
Keeping scrolling, the text block goes up and another background image is revealed.
Scrolling again and another text block recover the fixed background image... etc.
I got some codes on the internet to do that and all this works.
I want my background to fit the width of the screen responsively.
My problem is I can make my image resize correponding to the width size of the browser, BUT the div block containing the image fit the height of the browser. Let's say, on mobile device I have my little image at the top of my page, and nothing below, unless I scroll... then the text block comes up on he screen and recover the BG image...
So I would like my BG image fit the width of the browser and the div fit the height of the image...
Is that possible or should I change my design?
Thanks a lot.
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Roboto", sans-serif;
color: #3d3536;
background-color: #1f1f1f;
}
body, html {
/* important */
height: 100%;
}
a {
color: #b4d7a8;
text-decoration: none;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 768px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-main-content {
/* you need to assign a min-height to the main content so that the children can inherit it*/
height: 100%;
position: relative;
z-index: 1;
}
.cd-fixed-bg {
position: relative;
min-height: 100%;
width: auto;
/*background-size: cover;*/
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center 52px;
z-index: 1;
background-attachment: fixed;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
font-size: 30px;
font-size: 1.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: white;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-3 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-4 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
#media only screen and (min-width: 768px) {
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 36px;
}
.cd-fixed-bg {
/*background-position: center 70px;
/*height: 100%; */
}
}
#media only screen and (min-width: 1170px) {
.cd-fixed-bg {
/*background-attachment: fixed;*/
background-position: center 70px;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 48px;
font-weight: 300;
}
}
.cd-scrolling-bg {
position: relative;
min-height: 100%;
padding: 4em 0;
line-height: 1.6;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
background-color: #3d3536;
color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
background-color: #99a478;
color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
background-color: #b4d7a8;
color: #3d3536;
}
#media only screen and (min-width: 768px) {
.cd-scrolling-bg {
padding: 8em 0;
font-size: 20px;
font-size: 1.25rem;
line-height: 2;
font-weight: 300;
}
}
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main class="cd-main-content">
<div class="cd-fixed-bg cd-bg-1">
<!--<img src="img/HEADER.png" class="cd-fixed-bg">-->
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-2">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-2">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-3">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-3">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
</main> <!-- cd-main-content -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
The height of the div seems to be affected by the amount of text. As the screen size gets less wide, the text in the div takes up more vertical space. Try changing the min-height of the div to either a different percentage at that size. You can also try adding a max height giving the height a range of how large it should be.
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}