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;
Related
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.
This is my fiddle of the issue: https://jsfiddle.net/oa2b4cr9/
#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img{
padding-bottom: 10px;
}
#pagecontent{
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
}
I'd like the two bars to fill the gap from the top to the bottom of the page. I've researched for the last couple of hours and it's driving me a bit mad! I've tried:
Adding display: table to the relevant elements
Setting the min/max/height for both of the columns to 100% and that just pushes the container through the footer.
Adding clear: both under both of the columns
Setting the overflow to hidden
Setting position to relative for the footer rather than absolute.
If anyone can help I would greatly appreciate it.
If you are trying to make an element positioned based on the browser viewport this is not a good use of float or flex. You are trying to achieve an absolute position.
header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>
Declare a height property on the containing element #content, e.g:
#content{
/* additional */
height: 100%;
}
Then declare a height property on the nested #nav element, e.g:
#nav{
/* additional */
height: 100%;
}
Code Snippet Demonstration:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
height: 100%;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
height: 100%;
padding-bottom: 20px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px;
/* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
Updated JSFiddle
In addition:
The #footerbar element has been set to position: fixed
padding-bottom has been declared on the #pagecontent element to
account for the footer height taken out of the normal document
flow.
Alternatively:
1. flex-box alignment (check browser compatibility):
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
display: flex;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
padding-left: 15px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
2. absolute positioning:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
margin-left: 200px; /* offset sidebar nav width */
padding-left: 20px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
3. pseudo-elements:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
/* start additional */
#content:before {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
max-width: 200px;
min-width: 200px;
background-color: #CBDDE6;
border-right: 1px solid black;
z-index: -1;
}
/* end additional */
#nav {
max-width: 200px;
min-width: 200px;
float: left;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
float: right;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
I'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'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'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