I am in the process of building a website for a customer. MY problem is with one page. Whenever the page goes to a different sized viewing window the entire page breaks. I have already set a viewpoint, and even tried switching all of my pixel values, to show percents of the page. None of this however has fixed my problem. Below is my code for the broken web page. I have tried using the div tag to try and create spacing, yet it never works, no matter what I try I can't get it to view properly on other viewing platforms. This includes mobile and when the browser is not in full screen.
HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<script type="text/javascript" src="mainjs.js"></script>
<link rel="stylesheet" href="maincss.css">
<link rel="shortcut icon" href="tb.jpg">
</head>
<header>
<center>
<img src="FIMM USA Columbus.jpg" class="logo">
<p><em><strong>About Us</strong></em></p>
</center>
</header>
<body>
<hr class="yellowb">
<table style="width:100%;">
<th>Home</th>
<th>Products</th>
<th>About Us</th>
</table>
<hr class="yellowb1">
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
</body>
<footer>
</footer>
</html>
CSS:
body {
background-color: #0d0d0d;
color: yellow;
font-family: arial;
height: 100%;
padding-left: 15%;
padding-right: 15%;
}
.logo {
height: 25%;
width: 25%;
}
.yellowb {
background-color: yellow;
height: 10px;
width: 100%;
border: none;
}
.yellowb1 {
background-color: yellow;
height: 6px;
width: 100%;
border: none;
}
button {
background-color: yellow;
color: black;
height: 40px;
width: 70px;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
height: 20px;
width: 80px;
background-color: yellow;
color: black;
}
.buildt {
height: 15%;
width: 50%;
}
.rightdiv {
float: right;
width: 65%;
height: 40%;
text-decoration: outline 3px solid yellow;
}
.largery {
font-size: 30px;
color: yellow;
font-family: Arial;
}
.white {
color: white;
font-size: 20px;
text-indent: 50px;
}
.product {
height: 90%;
width: 90%;
}
.rline {
border-left: none;
border-right: 8px solid yellow;
border-top: none;
border-bottom: none;
width: 34%;
height: 40%;
float: left;
}
.ltext {
width: 100%;
height: 40.5%;
}
.white1 {
color: white;
font-family: arial;
font-size: 20px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.white2 {
color: white;
font-family: arial;
font-size: 14px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.scale {
width: 100%;
height: 100%;
}
.div1 {
border: 5px solid yellow;
padding: 15px;
}
.left {
padding-left: 10px;
width: 20%;
}
.right {
padding-right: 10px;
width: 20%;
}
.middle {
width: 55%;
}
.round {
border-radius: 15px;
border: 5px solid yellow;
width: 75%;
height: 15%;
float: right;
}
.round1 {
border-radius: 15px;
border: 5px solid yellow;
width: 100%;
height: 40%;
}
.oh {
width: 100%;
height: 100%
}
It's not a good idea to rely on viewports alone to render a page. You should be adding media queries to your code. https://www.w3schools.com/css/css3_mediaqueries.asp
Also, when putting that code in jsfiddle.net, nothing is "breaking" per see. It just looks like it's not mobile responsive.
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>
This is happening right now: The footer text is weirdly aligned (text-align is on center here, text-align left puts it slightly left of the center and text-align right works properly.
I also tried display: table-cell which aligns my text properly but puts the footer itself in an awkward spot and it cant be moved using margins.
Here's my (related) code:
.footer {
display: table-cell;
background-color: aqua;
width: 1000px;
max-width: 1000px;
margin: auto;
border: 5px solid #ccc;
margin-top: 30px;
line-height: 12px;
text-align: center;
}
<footer>
<div class="footer">
<h2>Footer stuff</h2>
</div>
</footer>
Hopefully this is all you need I prefer to keep my post as short as possible, tell me if you need more and thanks in advance for any help.
EDIT: My entire code
Body {
background-color: darkred;
}
.header {
text-align: center;
width: 100%;
}
#navbar {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: darkblue;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
padding: 8px 160px;
font-weight: bold;
color: white;
border-right: 1px solid #ccc;
}
#navbar li a:hover {
color: #c00;
background-color: #fff;
}
.container {
background-color: aqua;
width: 100%;
max-width: 1000px;
margin-top: 50px;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
border: 5px solid #ccc;
text-align: center;
height: 100%; /* BE ADVISED! (????) */
}
#ipsumpic1 {
width: 150px;
float: right;
}
#ipsumpic2 {
width: 100px;
float: left;
}
#sidebarleft {
margin: 0px auto;
position: relative;
left: 1000px;
padding-top: 0px;
width: 240px;
float: left;
border: 5px solid #ccc;
background-color: aqua;
margin-top: -350px;
}
#sidebarright {
padding-top: 0px;
width: 240px;
float: right;
border: 5px solid #ccc;
background-color: aqua;
margin-top: -537px;
margin-right: 1100px;
}
.footer {
display: table;
background-color: aqua;
width: 1000px;
max-width: 1000px;
margin: auto;
border: 5px solid #ccc;
margin-top: 30px;
line-height: 12px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Prachtige website</title>
<meta charset="utf-8">
<link rel="Stylesheet"type="text/css" href="css/style.css">
<script type=text/javascript src="script.js"></script>
</head>
<body>
<header>
<div class="header">
<img src="img/logo.svg" width="200">
</div>
</header>
<ul id="navbar">
<li>Home</li>
<li>Producten</li>
<li>Diensten</li>
<li>Over Ons</li>
<li>Contact</li>
</ul>
<div class="container">
<main>
<h1>Lorem Ipsum</h1>
<img id="ipsumpic1" src="img/ipsum1.svg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pulvinar dolor, a rutrum tortor. Vestibulum auctor finibus odio id efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper risus neque, sed vehicula augue finibus sed. Donec pretium ornare libero a venenatis. Donec sed ex id tellus posuere interdum. Nullam tincidunt egestas odio non gravida. Sed ut felis aliquet eros commodo elementum. Aliquam ullamcorper, diam quis aliquet tempor, magna nisi laoreet nisl, at vestibulum arcu enim quis elit. </p>
<img id="ipsumpic2" src="img/ipsum2.svg">
<p>Ut faucibus dui lectus, vitae pharetra magna maximus quis. Donec sollicitudin sem non ornare vulputate. Suspendisse pretium lacus nec gravida tristique. Sed sed nibh et eros facilisis accumsan. Nam mi elit, fermentum eu laoreet vel, venenatis sit amet leo. Curabitur erat arcu, dictum eu massa quis, hendrerit mattis turpis. Etiam ultrices quam dolor, a interdum erat eleifend eu. Cras sed blandit nunc. In dictum dignissim enim, vel gravida nisl sagittis pellentesque. Quisque fermentum pellentesque velit a faucibus. Nulla facilisi. In fermentum, mi id feugiat ultricies, nulla lorem elementum felis, et pretium velit mauris sit amet odio. Curabitur facilisis, mi in eleifend commodo, enim ex dignissim quam, ut pulvinar magna nisl et orci. Duis pulvinar imperdiet pretium. Nullam vehicula tortor in ex volutpat egestas. </p>
</main>
<div id="sidebarleft">
<aside>
<h2>Nieuw nieuws!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin. </p>
</aside>
</div>
<div id="sidebarright">
<aside>
<h2>Social media!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin.</p>
</aside>
</div>
</div>
<footer>
<div class="footer">
<h2>Footer stuff</h2>
</div>
</footer>
</body>
</html>
Apply table to parent (.footer) and table-cell to children (.footer h2)
.footer {
display: table;
background-color: aqua;
width: 100%;
border: 5px solid #ccc;
height: 100px;
}
.footer h2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<footer>
<div class="footer">
<h2>Footer stuff</h2>
</div>
</footer>
Solution with flexboxes:
display: flex;
flex-flow: row;
justify-content: center; --> centering horizontally
align-items: center; --> centering vertically
if you use table-cell try:
vertical-align: center;
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>
i am having trouble sorting out my layout for my website, basically the footer at the bottom is being overlayed by the content above it and i cant figure out what is causing this.
Here is the - https://jsfiddle.net/2py4tus9/4/
Thanks for your help
Here is the html
html,
body {
height: 100%;
width: 100%;
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
Remove height:100% from your tabs class.
.tabs {
position: relative;
width:100%;
/*height: 100%;*/
background-color: greenyellow;
display:inline-block;
}
DEMO
Your body element is set to width 100% and height 100% this is makes your page align to the viewport.
So removing the height and width makes the content scale more reasonably.
This also causes the the elements to expend the content on body so that they don't overlap.
I believe this is what happened with your footer.
html,
body {
min-width: 1000px;
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
overflow: auto;
}
#indexWrapper {
width: 100%;
height: 100%;
background-color: #9f1717;
margin-bottom: 100px;
}
#mainContentWrapper {
width: 100%;
height: 100%;
height: auto;
/* position: absolute;*/
min-height: 100%;
/* min-height: 1000px;*/
margin-top: -20px;
/* background-color: #fafafa;*/
background-color: palevioletred;
}
/*----- Tabs -----*/
.tabs {
position: relative;
width: 100%;
height: 100%;
background-color: greenyellow;
display: inline-block;
}
/*----- Content of Tabs -----*/
.tab-content {
float: left;
height: auto;
width: 100%;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
/* background:#fff;*/
background-color: blue;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
.tabContentBox {
width: 50%;
height: auto;
clear: both;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.tabElementBox {
height: auto;
border-bottom: 4px solid #eee;
padding: 30px;
}
.footerWrapper {
width: 100%;
height: 100px;
background-color: gold;
}
<div id="indexWrapper">
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="mainContentWrapper">
<div class="tabContentBox">
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
<div class="tabElementBox">
<p style="padding-left: 15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur lectus ac quam convallis, eu mattis nibh pretium. Maecenas faucibus lacus sed interdum tincidunt. Aenean sit amet elit arcu. Vestibulum non arcu non metus dignissim
ultrices quis sed nunc. Donec non elit nibh. Mauris ultricies ligula imperdiet neque pulvinar, quis laoreet enim venenatis. Maecenas non felis non risus elementum condimentum. Phasellus eleifend sagittis risus quis viverra. Suspendisse
consequat a urna id consequat. Proin aliquet eu nibh at finibus. Curabitur et quam vitae tortor accumsan laoreet. Duis euismod elementum elit vel porta. Suspendisse ultrices maximus felis, at facilisis odio elementum eu.</p>
</div>
<!--tabElementBox-->
</div>
<!--end tabContentBox-->
</div>
<!--end mainContentWrapper-->
</div>
<!--tab-->
</div>
<!--end tab-content-->
</div>
<!--end tabs-->
<div class="footerWrapper"></div>
<!--end footerWrapper-->
</div>
<!-- end indexWrapper-->
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;
}