I'm trying to create a list of horizontal items so they can be used as navigation. But for some reason, setting display to inline is not working. I have also tried setting display to inline-block with no results. Any suggestions?
CSS
#page {
margin-top: 2em;
background: #00000
}
#pageborder {
background-color: white;
margin-left: 150px;
margin-right: 150px;
}
body, html {
padding: 0;
margin: 0;
background-color: #EEEEEE;
height: 100%;
font-family:"Monospace", Lucida Console;
font-size: 16;
}
h1 {
font-size: 28pt;
}
h2 {
margin:0;
padding-bottom: 7px;
font-size: 22;
}
p {
margin-bottom:0px;
padding-bottom:0px;
}
#header {
height:50px;
background-color: none;
border-color: #E7E7E7;
font-size: 28pt;
color: white;
padding-top: 20px;
padding-bottom: 5px;
margin-top: 108px;
}
#content {
position: left;
color: #5E5849;
background-color: white;
border: 2px solid;
border-color: #EEEEEE;
text-align: left;
padding: 1em 2em 4em;
margin-left: 20px;
margin-right: 322px;
}
#sidebar {
float:right;
margin-right: 180px;
position: absolute;
top:;
right:0;
text-align: left;
width: 250px;
border: 2px solid;
border-color: #EEEEEE;
padding-top: 8px;
padding-left: 40px;
}
#twitter {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#youtube {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#google {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
padding-bottom: 2px;
}
#justin {
display: inline;
float: left;
margin-bottom: 10px;
margin-right: 20px;
}
#Social {
border-bottom: solid thin grey;
padding-bottom: 7px;
font-size: 15px;
margin-top: 10px;
}
#profilepic {
margin-bottom: 10px;
}
* {
margin: 0;
}
.footer {
margin-left: 100px;
height: 2em;
color: white;
clear: both;
background-color: black;
}
th {
text-align: left;
padding-right: 2em;
}
#nav {
width:100%;
height:30px;
background-color:#999;
}
#nav ul {
display: inline-block;
list-style-type: none;
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li {
display:inline;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css" />
<title>Template</title>
</head>
<body>
<div id="page">
<div id="pageborder">
<div id="header">
<img src="banner.png" width=600 height=74.18>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
<div id="sidebar">
<table>
<tr>
<div id="Social"><p><b>Social</b></p></div>
<p>
<div id="youtube">
<a href="http://www.youtube.com/ksheehan77" target="_blank">
<img src="youtube_icon.png" width=36 height=36>
</a>
</div>
<div id="twitter">
<a href="http://www.twitter.com/#!/ksheehan77" target="_blank">
<img src="Twitter.png" width=32 height=32>
</a>
</div>
<div id="justin">
<a href="http://www.justin.tv/ksheehan77" target="_blank">
<img src="justintv.png" width=32 height=32>
</a>
</div>
<div id="google">
<a rel="author" href="https://profiles.google.com/110661467085975877308/" target="_blank">
<img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32">
</a>
</div>
</p>
</tr>
</table>
</div>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus nunc eget sem iaculis pharetra. Integer sodales interdum accumsan. In et diam neque. Praesent eget erat id lectus rutrum placerat a a purus. Integer molestie arcu vel orci iaculis sagittis consequat mauris hendrerit. Fusce placerat leo ac tortor fringilla posuere. Quisque et enim nisl, eu laoreet nibh. Sed vitae turpis leo. Etiam dictum pretium faucibus. Nam quis ornare nibh. Sed ultricies lacinia dolor ac ullamcorper. Sed dictum enim ut urna consequat quis bibendum mi eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisi vitae dui blandit ultrices.</p>
<p>Aliquam enim ligula, pharetra at scelerisque eu, imperdiet vel lorem. Phasellus faucibus nunc ac purus imperdiet eleifend. Praesent id scelerisque massa. Suspendisse sed ornare lectus. Duis eget lacus quam, quis pharetra magna. Phasellus rhoncus, lectus et dictum accumsan, diam justo volutpat urna, ac auctor leo velit in augue. Proin eget nisi vel turpis hendrerit tempor sed a odio. Phasellus lacinia placerat lobortis. Vestibulum consequat bibendum semper. Vivamus cursus eros non felis gravida fermentum. Donec pulvinar, nisl a varius volutpat, ante lectus varius erat, ac sodales nisl nulla sed eros. Nam bibendum cursus bibendum. Nam id orci vitae odio consequat vestibulum eu vitae ipsum. Fusce ullamcorper pretium est, eget elementum mauris tristique vitae.</p>
<p>Suspendisse facilisis mauris eget mi tempus porta. Morbi viverra, libero sed posuere porta, est purus commodo nunc, ac interdum lacus eros et turpis. Pellentesque consequat sagittis elit vel imperdiet. Pellentesque elementum, eros eget vestibulum tempor, justo metus volutpat purus, sed viverra justo odio et erat. Maecenas id urna quam. Praesent auctor congue venenatis. Aenean dolor nisl, viverra vitae ornare sed, pretium sed nibh. Pellentesque pharetra pellentesque ipsum, in ornare lacus iaculis vel. Aliquam quis arcu lectus, eu pretium est. Integer a urna dui, vel tincidunt magna.</p>
<p>Nulla mauris felis, mollis at egestas at, suscipit at sem. Donec tincidunt, tellus at consectetur consectetur, elit nisi ullamcorper dolor, vel posuere odio sapien quis ligula. Proin nunc arcu, commodo id hendrerit pulvinar, hendrerit a ligula. Nulla sagittis iaculis est, eleifend mollis dolor ullamcorper a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non urna non nulla mollis rhoncus. Mauris eu urna tortor, et tincidunt diam.</p>
<p>Ut vehicula sodales nisi eu viverra. Donec nec sollicitudin nisi. Quisque tristique massa vel felis gravida iaculis. Proin a urna quis lacus facilisis viverra. In lacus nunc, faucibus sed luctus sit amet, tempor vitae nunc. Sed erat urna, ultricies non pretium at, vehicula id nibh. Sed sed dolor nisl. Duis nisi felis, euismod sit amet pulvinar ac, hendrerit vel tellus. Fusce vehicula tristique pellentesque. Cras molestie laoreet viverra.</p>
</div>
</div>
</div>
</div>
<center>
<div class="footer">Kieran Sheehan - 2012</div>
</center>
</body>
</html>
Works using:
<html>
<head>
<style type="text/css">
#nav{
width:100%;
height:30px;
background-color:#999;
}
#nav ul{
height:150px;
color: red;
padding-left: 150px;
}
#nav ul li{
display:inline;
list-style-type: none;}
</style>
</head>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Links</li>
</ul>
</div>
</html>
Try refreshing your browser using Ctrl+F5 - it may have cached some results that didn't work.
works well for me. Do you have some other css rules that could conflict with these ones? You could check which styles are applied to your "li" with the chrome developper console, maybe.
By the way, "list-style-type" is meant to be used with "ul" or ol", not with "li".
Although your css does not include such a property, make sure your li elements don't clear (i.e. clear:left / clear:right / clear:both)
To double check, add this into your css (using !important is bad, only use it for testing)
#nav ul li{
clear: none !important;
}
try adding floating too to see if you manage to get your elements to appear on the same line. If you still have no luck, there is definitely something wrong with your setup that's not apparent from the code you pasted.
#nav ul{
display: inline-block;
list-style-type: none;
height:150px;
color: red;
***padding-left: 150px;***}
I think here you did mistake; Remove padding for ul, might b it'll work
Related
I am trying to build a responsive Website. With quite an effort (and help from the community) I managed to mount a fixed background image. But now I am encountering two issues:
With small screens, the content of the elements in front of the image is cut off at the bottom, scrolling is not possible.
The footer is overlapping the other elements.
html/ css:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Homepage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
box-sizing: border-box;
font-size: 62.5%;
}
Body {
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction:column;
}
#backgroundImage {
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
#backgroundImage::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('ImageLake.bmp');
background-size: cover;
opacity: 0.1;
}
#Page {
position: fixed;
top: 0;
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
position: absolute;
bottom: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
</style>
</head>
<body>
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
</body>
</html>
How can I make the content of the elements in the foreground scrollable?
How can I move the footer to the bottom without it overlapping the other elements?
to avoid cut off of content at the bottom change #page position fixed to relative.
#page{
position: relative;
}
then a scrollbar will appear.
2. to avoid overlapping of footer use:
footer{
position:relative;
bottom:0;
}
and to be honest your styling practice is not good. You should use class to style elements instead of ids.
There were actually quite a few tweaks that I think should be made to get you what you wanted.
Firstly, the background. I would go with position: fixed; rather than position: absolute; to make sure the background is completely independent of the content.
Secondly, the footer does not need the position attribute set, rather you could make it part of the flexbox layout, setting the flex attribute on your #backgroundImage element (and removing the position attribute from backgroundImage).
Lastly, make sure the html and body tags have a full height set in the CSS so everything will scale on larger screens.
You end up with something like:
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}
body {
height: 100%;
font-size: 1.6px;
font-size: 1.6rem;
line-height: 1.5;
font-family: "Courier New", Courier, sans-serif;
color: black;
display: flex;
flex-direction: column;
}
#backgroundImage {
height: auto;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
#backgroundImage::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg');
background-size: cover;
opacity: 0.1;
}
#Page {
width: 95%;
background-color: rgba(0, 0, 0, 0.2);
margin: 0.3em auto;
border: 0.3em solid #00ccff;
border-radius: 5em;
}
#Logo {
font-size: 3.5rem;
font-weight: 650;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0.5em;
letter-spacing: 0.2em;
}
#Center {
height: auto;
}
footer {
flex-shrink: 0;
}
/* -- STYLES FOR NAVIGATION-MENU -- */
ul#navMain {
list-style-type: none;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
}
li.menu-eintrag a:hover {
font-weight: bold;
}
.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,204,255,0.4);
border-radius: 5em;
white-space: nowrap;
}
.terminvereinbarung a:hover {
border: 0.5em dotted rgba(50,204,255,1);
border-radius: 5em;
}
.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
font-size: 120%;
color: black;
text-decoration: none;
font-weight: bold;
padding: 0.5em;
border: 0.5em solid rgba(0,0,0,0);
border-radius: 5em;
white-space: nowrap;
}
.menu-eintrag a:hover {
border: 0.5em solid rgba(255,255,255,0.4);
border-radius: 5em;
}
#media screen and (min-width: 40em) {
#nav {
display: table;
margin: 0 auto;
}
#nav li {
font-size: 80%;
width: auto;
display: inline;
white-space: nowrap;
}
#Center {
display: inline-block;
padding: 0 1em;
}
#begruessung {
text-align: center;
}
#ColumnRight {
padding: 1em;
}
}
#media screen and (min-width: 64em){
header {
padding-top: 0em;
}
#Content {
display: flex;
}
#nav,
#ColumnRight {
width: 20%;
float: left;
}
#nav li {
display: block;
font-size: 100%;
width: 100%;
float: none;
padding: 1em;
}
#Center {
float: left;
padding: 0em 3em;
width: 50%;
}
#begruessung {
text-align: left;
}
li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
}
#ColumnRight a:link,
#ColumnRight a:visited,
#ColumnRight a:hover,
#ColumnRight a:focus,
#ColumnRight a:active {
}
}
<div id="backgroundImage">
<div id="Page">
<header>
<div id="Logo">
Header of the Page
</div>
</header>
<div id ="Content">
<nav id="nav">
<ul id="navMain">
<li class="terminvereinbarung">Alpha
<li class="menu-eintrag">Beta
<li class="menu-eintrag">Gamma
<li class="menu-eintrag">Delta
<li class="menu-eintrag">Epsilon
</ul>
</nav>
<div id="Center">
<h1 id="begruessung">
Welcome at our place! </h1>
<h2>
We are opening soon.
</h2>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
<h3>
We are hiring.
</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
</p>
</div>
<aside id="ColumnRight">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
</aside>
</div>
</div>
</div>
<footer>
<ul id="footerList" >
<li class="footer-menu-eintrag">© 2021 Mister Me
<li class="footer-menu-eintrag">Contact
<li class="footer-menu-eintrag">Alpha
<li class="footer-menu-eintrag">Beta
</ul>
</footer>
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'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%;
}
i am experimenting with html and css and trying to figure out how to make this work... I am just trying to make the #menu float to the right of the h1 but be on the same baseline so... but obviously float:right makes it float to top-right? any way to make it float to bottom-right or align with the bottom of the containing div?
here is the html:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<h1>Website.com</h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p>
<p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p>
<p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p>
<hr />
<p id="footer">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2010 Website.com. All rights reserved.</p>
</body>
</html>
and here is the css:
body
{
font-family: verdana, sans-serif;
min-width: 800px;
}
h1
{
display: inline;
font-variant: small-caps
}
h1 a
{
color: #090;
text-decoration: none;
}
h1 a:hover
{
color: #0A0;
}
#menu
{
float: right;
display: inline;
margin: 0;
padding: 0;
font-variant: small-caps;
}
#menu ul
{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
}
#menu ul li
{
float: left;
display: inline;
}
#menu ul li a
{
color: #090;
background-color: #F3F3F3;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#menu ul li a:hover
{
font-weight: bolder;
color: #0A0;
background-color: #F3F3F3;
border-bottom: 4px solid #0A0;
padding-bottom: 0;
}
#footer
{
text-align: center;
font-size: x-small;
}
here is what is looks like now:
thanks for help!
I haven't looked into this much, but if you set the containing div's position: relative, you can just make the ul position: absolute; bottom: 0; right: 0 and it should go where you want it.
Example:
div {position: relative}
ul {position: absolute; bottom: 0; right: 0}
li {float: left; list-style: none}
--
<div>
<h1>Header</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Etc...</li>
</ul>
</div>
There's no property floating it bottom-right or top-right. But without changing your html structure you can just add a top margin to your menu div
#menu {
....
margin-top:20px;
}
You can use table:
<table id="title">
<tr>
<td>
<h1>Website.com</h1>
</td>
<td>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</td>
</tr>
</table>
And add this into your CSS file:
#title
{
width:100%;
}
#title td+td
{
text-align:right;
vertical-align:center;
}
Vertical align is default set to center, so you need not to set it.
Or if you don't want to use table, you can just set padding-top:10px; into #menu ul.