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.
}
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>
This is how my site looks so far (Note: I'm kinda trying to teach myself how to do the HTML for this site right now. I'll worry about the design later. I know thats now how one should go about designing a site. But whatever)
http://imgur.com/10ZC7
For the header, is this HTML correct/efficient? If not, what is the correct/efficient way to achieve this effect for the header? The header is all one image.
Thanks for any help in advance!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CogRobot Studios</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<!--[if IE]>
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
</head>
<body>
<div id="wrap" class="container">
<div id="bigheader"> </div>
<div id="header" class="rounded-corners column span-24 last"></div>
<div id="content" class="column span-15 colborder">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
</div>
<div id="sidebar" class="column span-7 last">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
</div>
<div class="rounded-cornersbottom" id="footer">
© 2005, Lorem ipsum dolor sit amet.
<br />
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</div>
</body>
</html>
CSS
#wrap{
position: relative;
top: 150px;
}
body {
background: background: url("../images/header.png");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
p, ul, li, h1, h2, h3, h4 {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
#bigheader{
background: url("../images/gearheader2.png") no-repeat;
min-height: 347px;
min-width: 1062px;
top: -115px;
right: 0px;
position: absolute;
width: 100%;
z-index: -99;
margin: 0 auto;
}
#header {
width: 950px;
height: 177px;
}
#content{
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
width: 590px;
}
#sidebar {
float: right;
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
}
#footer {
background-color: #838383;
color: #c8c8c8;
text-align: center;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
h2 {
font-size: 110%;
}
.slogan {
color: #954b4b;
}
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
.rounded-corners {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius: 20px;
}
.rounded-cornersbottom {
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius: 20px;
}
Hi i have made the some changes in your HTML due to some errors so now its working fine.
And about the header part i have made few changes as mentioned below :-
#bigheader (i have applied here small circles images rather than your heavy large header image placed in header with positing).
#header (i have made the header completely css based use of border-radius & background color.)
You can see your updated HTML here :-
http://jsfiddle.net/KXGfj/23/
Hey you have used one of the css frameworks,. anyways yes i don't know if this is correct of an efficient way but i usually encapsulate the sub header div inside header div..
in your case something like.:
{(bigheader) {(header)}}
I have a css layout which is centered, with 100% height. Everything looks good except that I need borders on the left and right side, with background images, that also must extend to 100% height of the page.
I've tried lots of different options but can't seem to get this worked out.
Please take a look at my code and let me know what I can do. Keep in mind everything but the right and left columns is positioned as I need it.
The left and right columns are leftbdr and rightbdr.
Thanks for any assistance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tmp Site Mockup</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:#9C090C;
}
p {
line-height:1.5;
margin:0 0 1em;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:974px;
background:#F2F8FB;;
height:auto !important; /* all other browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* all other browsers */
}
#leftbdr{
width:49px;
float:left;
position:relative;
background:url(assets/img/lftSideShadow.jpg) repeat-y right top;
}
#rightbdr{
width:11px;
float:right;
position:relative;
background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
}
#header {
height:22px;
padding-top: 4px;
padding-right: 27px;
border: 1px solid #6B0100;
background-color:#CE0200;
color:#FFFFFF;
text-align: right;
}
#header p {
font-family: Tahoma, arial;
font-size:11px;
margin:0;
}
#subheader {
height:122px;
border-bottom:2px solid #B3B3B3;
background-color: white;
}
#welcome {
height:31px;
border-top:1px solid white;
border-bottom:1px solid white;
background-color: #C20F00;
}
#topnav {
height:62px;
background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
#topnav p{
text-align:right;
padding-right:22px;
font-size:10px;
color:#333;
}
#content {
padding:1em 1em 5em; /* bottom padding for footer */
background:#F2F8FB;
}
#content p {
text-align:justify;
padding:0 1em;
}
#footer {
position:absolute;
height:72px;
width:100%;
bottom:0; /* stick to bottom */
background:#9C090C url(assets/img/footerBG.gif) repeat-x;
color:white;
}
#footer p.left {
float: left;
padding-left:15px;
padding-top:7px;
}
#footer p.right {
float: right;
padding-right:15px;
padding-top:7px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbdr" > </div>
<div id="header">
Home | Website.com | My Site | Logout
</div>
<div id="subheader">
</div>
<div id="welcome">
</div>
<div id="topnav">
<p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
</div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
</p>
<h2>Vestibulum eu purus</h2>
<p>
Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci.
</p>
<h2>Maecenas faucibus sapien</h2>
<p>
Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
</p>
<p> </p>
</div>
<div id="footer">
<p class="left">
2010 Company Name, Inc. All Rights Reserved.<br />
<span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
</p>
<p class="right">
Company Home | My Site | Log Out
</p>
</div>
<div id="rightbdr" > </div>
</div>
</body>
#container is the key. It takes up the full area of your page. You could apply a background/border style to it and/or <body> to achieve what you want.
For example a repeating image slice on <body> that is centered with repeat-y could give the effect of a graphical border without needing leftbdr and rightbdr.