Related
More specific I want the content section (the section with the white background) fill the mising space, so the header and footer have it's own fixed size and the content section is as big as it takes to fill/fit the full height.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Startseite - Malermeister Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
<!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<img id="headerLogo" src="img/Logo Malerinnung.jpg" alt="">
<h1 id="headerHeading">Malermeister Gen</h1>
<p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
</header>
<nav id="headerNav">
Home
Unser Team
Kontakt
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
<p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
<p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
<p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
</div>
</div>
<footer id="footer">
<p id="footerP">© Malermeister Gen GmbH |
Kontakt |
Impressum
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
</footer>
</div>
</body>
</html>
CSS:
body{
background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
margin: 0;
font-size: 14px;
}
#header{
height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
padding: 0.6em;
background: darkgrey;
}
#headerLogo{
float: left;
height: 100%;
}
#headerHeading{
margin: 0 0 0 0.4em;
display: inline-block;
}
#headerSlogan{
display: block;
margin: 0.2em 0.2em 0 0;
float: right;
font-size: 1.25em;
}
#gestaltung{
color: rgb(0, 51, 145);
}
#schoenheit{
color: rgb(241, 185, 0);
}
#schutz{
color: rgb(212, 24, 0);
}
#headerNav{
height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
margin: 0 0 -0.2em 0;
padding: 0.5em 0 0.23em 0;
display: block;
text-align: center;
background: lightgrey;
}
.headerNavLinks{
margin: 0 0.4em;
padding: 0 0.6em;
text-decoration: none;
font-size: 1.25em;
border: 0.0625em solid black;
border-radius: 10%;
}
.headerNavLinks:hover{
background: black;
color: white;
}
#headerNavActive{
border: 0.0625em solid green;
border-radius: 10%;
}
#contentWrapper{
background: white;
padding: 0.6em;
}
#contentHeading{
margin: 0;
}
#content{
}
#content p:last-child{
margin: 1em 0 0 0;
}
#footer{
background: darkgrey;
padding: 0.6em;
}
#footerP{
margin: 0 0 0.4em 0;
text-align: center;
}
#scrollBackToTop{
background: lightgrey;
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 480px){
body{
font-size: 15px;
}
}
#media only screen and (min-width: 545px){
body{
font-size: 16px;
}
#headerHeading{
margin: 0;
display: block;
}
#headerLogo{
margin: 0 0.8em 0 0;
}
}
#media only screen and (min-width: 650px){
body{
font-size: 17px;
}
}
#media only screen and (min-width: 768px){
body{
font-size: 18px;
}
#headerLogo{
margin: 0 1.2em 0 0;
}
#headerSlogan{
margin: 0.2em 0.2em 0 0;
}
}
#media only screen and (min-width: 1024px){
#wrapper{
width: 768px;
margin: auto;
}
}
#media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/
html{
max-height: 52.38em;
}
body{
max-height: 52.38em;
}
}
#media only screen and (min-width: 2560px){
#wrapper{
height: 100%;
}
}
body {
height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
overflow-y:auto; // allows vertical scroll if the content is more.
}
This is my first post on here, so please excuse me if I say something silly. I'll cut to the chase. I'm making a website, and I'm trying to get my navbar to be on the same line as the title, which consists of one h1 line and one h2 line right underneath that. Basically, I want it to change from the way it looks right now to this really cool better-looking way!
Here's the CSS code I have corresponding to the navbar. Although, you'll probably find it easier to just check out the whole HTML and CSS code in the fiddle below. (also the navbar's all squishy due to how small the width of the preview is in jsfiddle but that's probably expected)
https://jsfiddle.net/2mtrhwyy/
#navul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
#navli {
float: left;
}
#navli a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thank you very much to anyone that takes a look at my problem in advance!
P.S. Also (and this is totally not as important so don't worry if you don't want to answer), but does everything look nice? Like the layout and color scheme and everything? I really want to make sure everything looks pleasing to the eye. Should I not use blue? Someone told me they didn't like the blue.
You can use flex for that. https://jsfiddle.net/2mtrhwyy/1/
Please view this snippet in full-screen mode
#first, h1 {
font-family: 'Raleway', sans-serif;
text-align: left;
opacity: 1;
font-size: 40px;
margin-bottom: 0em;
padding-bottom: 0em;
color: #444444;
display: inline;
}
#second, h1 {
font-family: 'Raleway', sans-serif;
text-align: left;
opacity: 1;
font-size: 40px;
margin-bottom: 0em;
padding-bottom: 0em;
color: #4186C4;
display: inline;
}
h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
color: #4186C4;
}
p, li {
font-family: 'Source Sans Pro', sans-serif;
}
div ul {
text-align: center;
// margin-left: -15px;
padding-top: 1em;
}
div ul li {
display: inline;
list-style-type: none;
margin-left: 20px;
}
div ul li:first-child {
margin-left: 0px;
}
div a {
color: inherit;
}
body {
margin: 50px 50px;
background-color: #fdfdfd;
// background-image: url("bnb.png");
// background-size: 10%;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
text-align: left;
font-size: 24px;
border-bottom: solid 0px;
padding-bottom: 1em;
margin-left: 0em;
margin-top: 0.4em;
color: #444444;
}
#navul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
#navli {
float: left;
}
#navli a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navli a:hover:not(.active) {
background-color: #ddd;
}
#navli a.active {
color: white;
background-color: #4186C4;
}
.active {
background-color: #4186C4;
}
.flex-container {
display: flex;
justify-content: space-between;
}
<html>
<head>
<script src="https://use.fontawesome.com/9f8fba671c.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/favicons/manifest.json">
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#0094ff">
<meta charset="utf-8">
<title>Christopher Trinh</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
</head>
<body>
<div class="flex-container">
<div>
<h1 id="first">Christopher<span id="second">Trinh</span> </h1>
<h3>Programmer / Writer / Optimist</h3>
</div>
<nav>
<ul id="navul">
<li id="navli"><a class="active" href="index.html">Home</a></li>
<li id="navli">Projects</li>
<li id="navli">Blog</li>
<li id="navli">Resume</li>
</ul>
</nav>
</div>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
<h2>Experience</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
<h2>Major Projects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae commodo magna, gravida tempor velit. Nam in velit auctor, tempor erat at, commodo urna. Curabitur vitae magna accumsan, imperdiet felis ac, varius justo. Praesent aliquam leo quis enim ornare, vitae posuere mi consequat. Ut diam ipsum, vulputate quis nisl id, eleifend facilisis ante. Donec vestibulum est vitae sem malesuada, sit amet faucibus tellus sagittis. Morbi fringilla in tortor ac placerat. Donec auctor vel augue vitae cursus. Suspendisse nulla metus, elementum et luctus vitae, maximus quis diam. Etiam ut congue est. Nam ut rhoncus lacus, eget pellentesque lacus. Sed auctor ut magna sed viverra. Quisque maximus hendrerit porttitor. Sed consectetur eros lectus, ut interdum orci laoreet vitae. Fusce a fringilla elit. Donec neque neque, cursus a malesuada nec, tincidunt sed sapien.</p>
<!-- <h2>Get In Touch</h2> -->
<div>
<ul>
<li><i class="fa fa-github fa-2x"></i></li>
<li><i class="fa fa-linkedin-square fa-2x"></i></li>
<li><i class="fa fa-envelope fa-2x"></i></li>
</ul>
</div>
</body>
</html>
I think there are two ways to achieve this: 1. CSS Grid, 2. Bootstrap.
I personally recommend Bootstrap, since it's much simpler.
You could put the logo in the navbar itself and adjust the size as you wish.
What I'm trying to do is to center the text (and image that will be side by side or on top of the text) but the command justify-content:center doesn't work for me. It centers horizontally but not vertically. Could you tell me what went wrong? I'm actually a beginner and that's my first website.
Here's the code:
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
.wrapper, which is your flex container, doesn't have a height setting. Add height: 100%; to it and the vertical centering works. However, the parent of .wrapper (i.e. .content) has height: 100vh - if its content grows beyond that, it will be a mess (i.e. overlapping), so you might want to change its height setting to min-height instead of height
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
min-height:100vh;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
It's because .wrapper is only as tall as the content inside of it, without a declared height that exceeds the content height. So there is no room for it to vertically center without a height that exceeds the content height. Adding height: 100vh; to .wrapper will force that.
what's up with the downvotes?
body {
font-family: Gotham A,Gotham B,Helvetica,Arial,sans-serif;
}
h1 {
font-size: 3em;
text-transform:uppercase;
}
h4 {
font-size: 1.5em;
color:#9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height:100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height:100vh;
background-color:#ebebeb;
padding:0 7%;
}
.heading {
display:table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform:none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size:20px;
}
a {
color:#000000;
transition: ease-in-out 0.15s
}
a:hover{
color:#fbd505;
}
#content {
width: 100%;
height:100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
display:column;
vertical-align: middle;
max-width: 960px;
}
.content-heading-span {
display: block;
font-size: 32px;
margin-top: 0px;
text-transform:uppercase;
margin-left:-20px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
</head>
<body>
<section id="welcome-screen">
<div class="heading">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</div>
</section>
<section>
<div id="content">
<div class="wrapper">
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<p><span class="content-heading-span"><strong>O Mnie</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
</body>
</html>
I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.
https://jsfiddle.net/jonnijonnason/L9vg468g/
If you check the fiddle, I want it to align beneath the image.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
CSS
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
Add to <div class="item"> column a position:relative;
The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.
Also, to make it not overlap the text you can also set padding-bottom
.item.contains-button {
position:relative;
padding-bottom:60px;
}
Your updated JSFiddle
What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.
Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/
HTML:
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
CSS:
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
position: relative;
}
.item.lastcol {
position: relative;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.
Updated code below.
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
display: flex;
flex-direction: column;
}
.row {
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: relative;
bottom: 0;
right: 0;
}
.item h3 {
order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p>
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
I've written a basic HTML and CSS file using Bootstrap and it works fine on my work computer with Chrome version 27.0.1453.110, but when I try to open the file in Chrome on my personal Mac(don't know the Chrome version) it opens VERY slowly, and lags when scrolling(like almost doesn't scroll at all!). What could I have done wrong, or excluded from the coding? It's a simple test page, with a background image, nav bar, footer and some text.
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: white;
font-size: 18px;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: rgba(96,96,96.75);
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: url(back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
margin-top: -10px;
width: 100%;
height: 120%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 400px rgba(0,0,0,.6);
box-shadow: inset 0 0 400px rgba(0,0,0,.6);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
color: white;
font-size: 30px;
margin-top: -15px;
margin-bottom: 50px;
}
.masthead-nav > li {
display: inline-block;
margin-bottom: 30px;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #B8B8B8; /* IE8 proofing */
color: rgba(184,184,184.4);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
color: white;
background-color: transparent;
border-bottom-color: white;
border-bottom-color: rgba(255,255,255,1);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: white;
border-bottom-color: rgba(255,255,255,1);
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
margin-top: -20px;
float: right;
}
}
/*
* Cover
*/
.cover {
color: black;
padding: 0 20px;
}
.cover .btn-lg {
border-radius: 4px;
padding: 10px 20px;
font-weight: bold;
}
.blockquote-reverse {
font-weight: bold;
color: white;
text-align: right;
}
.lead {
text-align: center;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
.mastfoot a {
text-decoration: none;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* Standard syntax */
top: 0;
left: 0;
}
.mastfoot {
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Pith and Prose</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li style="margin-right: 13px">Contact</li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding-top: 200px; width: 104%; height: 750px; margin-left: -20px">
<h1 class="cover-heading">Landing page.</h1>
<p class="lead">This is where everyone will "land" when they come to your page. We can put a little introduction to the whole blog and everything.</p>
<br/><br/><br/><blockquote class="blockquote-reverse"><p>"The business of life is the aquisition of memories...in the end, that is all there is."</p><footer><cite>Unknown</cite></footer><br/><br/>
<p class="lead">
Learn more
</p>
</div></div></div>
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding: 30px 30px 100px; background-color: rgba(0,0,0,.8); width: 98%; height: 500px; margin-left: -20px">
<h1 class="cover-heading" style="color: white; font-weight: bold;">Latest Post</h1>
<p class="lead" style="color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum orci nec risus pulvinar, nec mattis ipsum accumsan.
Nam faucibus, velit sed laoreet aliquam, mi dolor vestibulum orci, rutrum volutpat libero libero in justo. Praesent tincidunt,
lorem pretium pharetra congue, dolor arcu fermentum nibh, non finibus nisi metus auctor nisi. Nulla bibendum urna a lacus auctor, sit amet
vulputate lacus finibus. Morbi vel felis sit amet odio condimentum ullamcorper ac in mauris. Proin vitae vestibulum felis, ac ornare sapien.
Praesent sit amet mi elementum, porta turpis quis, varius nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse
commodo sed lectus id tempor. Vivamus ultrices ullamcorper augue vitae condimentum. Nulla gravida imperdiet molestie. Donec sed imperdiet
tellus. Nulla fringilla nunc vel ex fringilla semper.<br/><br/>Donec sit amet tincidunt dui. Suspendisse ex ex, luctus non imperdiet a, ornare
sed massa. Proin eget ultricies tellus. Quisque nec orci vel augue tristique tincidunt vel id ligula. Duis tincidunt placerat rhoncus. Aenean
eget ligula vel ligula hendrerit consequat. Suspendisse potenti. Aenean massa magna, volutpat sit amet ligula id, convallis fringilla ante.
Sed semper porttitor nisi, sit amet dignissim nulla lobortis a. Suspendisse hendrerit cursus sapien eu dignissim. Quisque pretium, nulla
ut malesuada luctus, enim sapien vulputate diam, efficitur maximus elit metus at lacus. Curabitur iaculis lobortis odio et porttitor. Sed
et congue ipsum.<br/><br/>Nulla ut dictum neque. Etiam placerat eros et mattis facilisis. Curabitur rutrum interdum est ornare suscipit. Nullam
mauris tortor, porta at cursus quis, finibus vel tortor. Nullam aliquam hendrerit nunc in tristique. Proin a leo risus. Maecenas interdum
pellentesque dui, rhoncus hendrerit massa scelerisque ut.<br/><br/>Nulla tempor congue tellus ac imperdiet. Ut facilisis erat eget porta bibendum.
Vivamus vitae nulla nec dolor laoreet finibus. Sed diam nibh, ornare nec maximus a, accumsan vitae diam. In convallis lobortis dolor a varius.
Sed a nisl in diam dapibus maximus ut sit amet mauris. Nulla tincidunt, nisl et dignissim mollis, sapien massa fermentum leo, volutpat porta
quam sem a erat. Pellentesque malesuada lectus sit amet dolor sollicitudin, vitae finibus magna molestie. Cras a ultrices libero. Etiam iaculis
sodales fringilla. Praesent commodo efficitur eros eu tincidunt. Ut ultricies aliquam tincidunt. Etiam feugiat elit in scelerisque vehicula.
Curabitur semper diam a erat finibus pretium.<br/><br/>Aenean sed est porttitor, bibendum lectus vehicula, facilisis lectus. Nam vehicula ligula
venenatis, lobortis lorem eu, fringilla nunc. Vestibulum ullamcorper sem vitae arcu suscipit iaculis. Etiam sodales nisl felis, nec tincidunt
arcu auctor nec. Sed suscipit hendrerit molestie. Vivamus finibus fermentum nunc non auctor. Mauris odio massa, dapibus quis fringilla in,
facilisis vel arcu. Nulla velit velit, tempor sit amet lacus quis, molestie condimentum sem. Vivamus a laoreet orci. Vestibulum dignissim ipsum
in quam placerat vulputate. Nullam malesuada et tortor vitae vestibulum. Aenean id mattis odio. Donec nec turpis lobortis, hendrerit nunc a,
vehicula odio. Pellentesque et ex ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div></div></div>
</div>
<div class="mastfoot">
<div class="inner">
<p>Built and designed for Pith and Prose, by Paraclete.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Box shadows take a long time to paint. It would probably be better to use a one-line image with background-repeat-y to get the inset shadow effect. That way Chrome knows it doesn't need to redraw the background and waste all that time calculating a huge area shadow effect. Alternately, the above link shows that just reducing the shadow blur radius can tremendously improve paint times.