Related
This is my fiddle of the issue: https://jsfiddle.net/oa2b4cr9/
#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img{
padding-bottom: 10px;
}
#pagecontent{
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
}
I'd like the two bars to fill the gap from the top to the bottom of the page. I've researched for the last couple of hours and it's driving me a bit mad! I've tried:
Adding display: table to the relevant elements
Setting the min/max/height for both of the columns to 100% and that just pushes the container through the footer.
Adding clear: both under both of the columns
Setting the overflow to hidden
Setting position to relative for the footer rather than absolute.
If anyone can help I would greatly appreciate it.
If you are trying to make an element positioned based on the browser viewport this is not a good use of float or flex. You are trying to achieve an absolute position.
header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>
Declare a height property on the containing element #content, e.g:
#content{
/* additional */
height: 100%;
}
Then declare a height property on the nested #nav element, e.g:
#nav{
/* additional */
height: 100%;
}
Code Snippet Demonstration:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
height: 100%;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
height: 100%;
padding-bottom: 20px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px;
/* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
Updated JSFiddle
In addition:
The #footerbar element has been set to position: fixed
padding-bottom has been declared on the #pagecontent element to
account for the footer height taken out of the normal document
flow.
Alternatively:
1. flex-box alignment (check browser compatibility):
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
display: flex;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
padding-left: 15px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
2. absolute positioning:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
margin-left: 200px; /* offset sidebar nav width */
padding-left: 20px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
3. pseudo-elements:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
/* start additional */
#content:before {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
max-width: 200px;
min-width: 200px;
background-color: #CBDDE6;
border-right: 1px solid black;
z-index: -1;
}
/* end additional */
#nav {
max-width: 200px;
min-width: 200px;
float: left;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
float: right;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
I have two columns, both 50% of the screen-width. The left column is filled with text, the right column has an image that scales to the height of the text. Another image is placed over this first image, positioned in the bottom right corner. Even if the screen-width exceeds the image-width (and whitespace appears to the right of the image), the second image should stay aligned to the bottom right corner of the first one.
The setup you can see in the code below works in browsers other than Firefox. In Firefox, the second image is positioned as far right as possible, up to the original width of the first image. I think I've narrowed it down to the 100% height I give .image div, if I use a fixed height (i.e. 400px), the second image is aligned correctly. I need the percentage height though, to let the first image scale to the text height.
.wrapper {
overflow: hidden;
position: relative;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
You can see how it works in Codepen.
Any help would be appreciated.
It has to be a bug on firefox. Your code seems to be working under 1170px. So I have come up with a quick fix, I don't know whether it's applicable in your case or not.
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
overflow: hidden;
position: relative;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
.big-wrapper {
margin-left: auto;
margin-right: auto;
}
<body class="big-wrapper">
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
</body>
Update
This second version, Demo 2, has been stripped of all flex, fixed position, and even intrinsic measurements (vw). Firefox works and even IE surprisingly.
Changed the background-color to make it look spacier.
Major Changes
Added html,body {height:100%;width:100%}
.wrapper needed 100x100% as well.
Now .image and .text has a parent that their percentages can relate to.
Gave .image min-height:100%
Removed both <img> and used background-image
Optional Changes
Made .wrapper position:fixed
Made .text and .image position:absolute
.wrapper is a flex container
.wrapper has overflow-y:scroll so at smaller widths, text can still be read and it's scroll instead of auto so there be no jumpy behavior when the scrollbar pops in and out.
I also edited Marv as a PNG with a transparent background. P38 modulator not included.
Demo 1
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 49vw;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
flex: 0 1 auto;
}
.image {
min-width: 49vw;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
flex: 1 0 auto;
}
.marv {
background: url("https://image.ibb.co/h1pCQy/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
Demo 2
html,
body {
height: 100%;
width: 100%;
background-color:#000;
color:#fff
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 50%;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
}
.image {
min-width: 50%;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
}
.marv {
background: url("https://image.ibb.co/hioYDJ/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
You can add this code below your CSS to fix on Firefox. But it is only true if the image does not resize in width. So you can mix with #media to use.
#-moz-document url-prefix() {
.image div {
display: ruby-base;
}
.image div:after {
overflow: hidden;
}
}
I checked your code please replace image style rules as below:
.image > div > img {
display: block;
height: 100%;
width: 100%;
}
And after rules as below:
.image div:after {
content: url(https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg);
display: block;
position: absolute;
bottom: -100px;
right: -60px;
/* width: 100px; */
/* height: 120px; */
}
I tested in both chrome and firefox, it works.
I've made a design with flex box. I've split my site in two parts. The left part has a width of 75% of the width of the window, the right side fill the rest.
The problem is now, when I place text into the right section, the text goes out of my screen. I've place a padding to the right side of that section but it must be 26.843.170 pixels (you read good) for to be good! To much of course... Note that the right side has a fixed position.
Now my question is, What I'm doing wrong? Here is my code:
$(".draw-area, .artist-info, .draw-en-info").css("height", parseInt($(window).height()) - parseInt($("fieldset").height()) + "px");
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.artist-info {
background-color: lightgray;
margin: 0;
position: fixed;
top: 50px;
padding: 0 10px;
width: 25%;
/* padding-right: 26843170px; */
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
.draw-en-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: absolute;
top: 47.9px;
width: 100%;
z-index: -1;
}
#draw-area {
width: 75%;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section id="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, </li>
</ul>
</section>
</div>
</main>
I'm not entirely clear on what you are trying to do but flexbox can manage most of this.
If there are some requirements that you haven't mentioned you may need to ask a new question.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
.option-list {
width: 100%;
height: 200px;
overflow-y: auto;
border: solid 1px #A9A9A9;
margin: 10px 0;
}
.draw-en-info {
display: flex;
}
.draw-area {
background: plum;
flex: 1;
}
.artist-info {
background-color: lightgray;
padding: 0 10px;
flex: 0 0 25%;
}
.option-item {
display: flex;
padding: 5px 10px;
transition: background-color 0.5s;
cursor: pointer;
}
.option-item:hover {
background-color: #1DD75F;
}
.form-control {
padding: 5px 5px;
}
#resultaatArtisten {
display: none;
}
fieldset {
background-color: white;
//position: fixed;
width: 100%;
margin: 0;
border: 0;
padding: 0;
border-bottom: gray 2px solid;
}
fieldset > div {
padding: 10px;
}
<main class="container">
<fieldset>
<div>
<input type="text" class="form-control" placeholder="Zoek op artisten naam" id="zoekArtist" />
<div class="option-list" id="resultaatArtisten"></div>
<div>
</fieldset>
<div class="draw-en-info">
<section class="draw-area"></section>
<section class="artist-info">
<p>Top nummers</p>
<ul class="top-nummers">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod
non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce
varius, ligula non tempus aliquam,</li>
</ul>
</section>
</div>
</main>
This code works in Chrome as I want but not in IE or Firefox. To be more clear and satisfy SO constrains about the comment-code ratio in a post I'd like that only the content area being scrollable when the viewport goes bellow 300px or the content simply does not fit. Actually IE is my only concern. How could I achieve the same behavior under IE >= v10.
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
overflow: hidden;
}
#table {
display: table;
height: 100%;
width: 100%;
}
.navBar {
width: auto;
height: 72px;
overflow: auto;
border-bottom: 1px solid #bbb;
display: table-row;
}
.results {
background: gray;
width: 100%;
height: 100%;
overflow: auto;
display: table-row;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
<body>
<div id="table">
<div class='navBar'>header</div>
<div class='results'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at
venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque
ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis
lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a
venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales
leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend
sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
</div>
<footer>footer</footer>
</div>
</body>
What do you think?
Is it a solution? I got the idea from here
<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
<!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. -->
<div class="wrapper">
<div class="inner-content">
<input type="text" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row footer">Footer</div>
html, body {
height: 100%;
max-height: 100%;
padding:0px;
margin:0px;
}
.table, .row {
outline: none;
border: none;
outline-style: none;
vertical-align: top;
text-align: left;
}
.table {
border-collapse: collapse;
display: table;
table-layout: fixed;
/* This will ensure the cells within the table will keep there width. */
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.header {
background-color: red;
}
.content {
height: 100%;
}
.footer {
background-color: green;
}
.wrapper {
position:relative;
height: 100%
}
.inner-content {
overflow: auto;
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
}
#media screen and (max-height: 300px) {
.footer {
display: none !important;
}
}
I'm not entirely sure what you mean by "only content area being scrollable". This was my interpretation of it:
http://jsfiddle.net/5q1Lgsy6/11/
By using a position: fixed width:100% top bar you can make it so that only the content below it will be scrollable.
I ditched all display: table tags, you don't really need them to organize your content unless that content is supposed to be displayed on an actual table.
Here's the CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#table {
height: 100%;
width: 100%;
}
.navBar {
background-color: white;
top: 0;
width: 100%;
height: 72px;
border-bottom: 1px solid #bbb;
position: fixed;
}
.results {
margin-top: 72px;
background: gray;
width: 100%;
height: 100%;
overflow: auto;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
EDIT: if you also want the footer to be permanently fixed add this to your CSS:
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: white;
}
there is a way to write css for IE
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
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%;
}