I've to print a document, with a logo at #top-left and page number at #bottom-right.
My initial style for printing, is this
#page {
margin-top: 40mm;
margin-bottom: 20mm;
margin-left: 30mm;
margin-right: 30mm;
#top-left {
content: background-image: url('images/logo.png');
}
#bottom-right {
content: "Pág. " counter(page);
}
}
But neither logo, neither page number appears. It's the margin of #page, guilty?
Now we have the problem expose in this snippet. Please take a look. Can you help?
window.print();
#media print{
#page {
size: A4 portrait
margin-top: 40mm;
margin-bottom: 20mm;
margin-left: 30mm;
margin-right: 30mm;
#top-left {
content: url('http://via.placeholder.com/350x150');
width: 350px;
height: 150px;
background-color: black;
}
#bottom-right {
counter-increment: page;
content: counter(page);
}
}
body { font: 12pt Arial; }
p{ text-align: justify }
h1 { font-weight: 900;
color: #0a468c;
padding: 30px 0 20px 0;
display: block;
}
}
<html>
<head></head>
<body>
<h1>Title</h1>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non risus elementum, vestibulum nisi non, dapibus nisl. In hac habitasse platea dictumst. Nunc varius sapien id nibh ullamcorper, at luctus est vestibulum. Integer lobortis interdum quam, non iaculis urna dapibus nec. Cras et neque pretium est lobortis egestas ut non elit. Cras eget faucibus nunc. Sed accumsan augue leo, et cursus urna luctus eget. Praesent sit amet enim ultricies, vehicula sem vel, suscipit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi tellus, volutpat vel euismod sit amet, fringilla ut ante. Sed tempus metus massa, quis mollis ex dapibus et. Quisque eget aliquam nisi. Ut in elit vitae urna lobortis maximus.</p>
<p>Ut ac euismod nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum enim id aliquam bibendum. Integer efficitur, ex eget consequat viverra, velit leo rhoncus massa, ut porta nisi tellus pharetra purus. Morbi id dignissim lectus, sit amet blandit augue. Cras pretium leo vel tellus auctor imperdiet. Donec id faucibus diam. Nullam posuere consectetur tristique. Nullam a rhoncus enim.</p>
<p>Praesent et bibendum metus. Sed volutpat erat sed sapien ultrices congue quis ac arcu. Proin nec porta urna. Aliquam eu mattis augue. Aliquam id velit pellentesque, varius urna pellentesque, sollicitudin tellus. Morbi ornare porttitor enim et convallis. Praesent vitae cursus leo. Cras commodo, metus quis euismod congue, lorem erat bibendum turpis, eget faucibus mi arcu sed tellus.</p>
<p>Vivamus placerat facilisis vestibulum. Nunc malesuada tempor vestibulum. Pellentesque eu pulvinar nulla, at feugiat sapien. Maecenas bibendum dolor quis ex ultrices, non ornare tortor venenatis. Phasellus ac mauris vitae lacus venenatis sagittis in ac nulla. Integer commodo nulla vitae turpis cursus, ut molestie elit sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lacinia risus id sapien placerat, ac convallis nisl vulputate. Aliquam cursus laoreet metus, et pulvinar leo. Pellentesque et nisi quis diam consequat posuere. Nullam eget erat sit amet nibh hendrerit fermentum nec eget tortor. Etiam mollis, ipsum non mollis viverra, metus libero dignissim ex, et rhoncus leo justo vitae lorem. Cras fermentum luctus accumsan.</p>
<p>Curabitur justo ligula, maximus in vehicula id, elementum ut nunc. Quisque ut malesuada ex, sit amet varius sapien. Cras nisl nibh, egestas nec ornare nec, interdum ac dui. Sed tincidunt, nibh et interdum hendrerit, odio mauris mollis metus, quis euismod nulla mi sed velit. Maecenas tincidunt velit nec venenatis finibus. Donec et sem non mauris efficitur sodales et id ante. Mauris id elementum orci. Etiam eu vulputate diam. Pellentesque semper, leo in euismod molestie, sem erat luctus magna, ut bibendum turpis odio porta dui. Mauris justo ipsum, posuere nec viverra et, commodo ac felis. Nullam scelerisque laoreet est ut dignissim. Suspendisse fermentum interdum risus, vel dapibus orci maximus quis. Etiam id quam lacinia, porttitor felis quis, pulvinar enim. Donec maximus blandit pellentesque. Suspendisse et tempus elit.</p>
</section>
</body>
</html>
this is one of the ways how you can use custom CSS for screen and for print environment.
I've built example layout and you can see how I positioned logo and counter in the top left and bottom right positions. See if that can help you. Try to open code snippent in full screen to see how it works and also I added comments in CSS section
/* CSS for screen */
#media screen {
body{
margin: 4em;
}
#logo{
background: url(http://placehold.it/100);
width: 200px; height: 200px;
}
#numbers{
position: fixed;
bottom: 4em; right: 4em;
}
}
/* CSS for printing */
#media print {
body{
margin: 2em;
}
#logo{
background: url(http://placehold.it/100);
width: 200px; height: 200px;
}
#numbers{
position: absolute;
bottom: 2em; right: 2em;
}
}
<div id="logo"> </div>
<div id="numbers">Pág. counter(page)</div>
Related
I am looking to make the div with the background on the left and right hand side, fill up the height of its container or be the height of another div the container contains (the magenta one).
Below are is an image.
Here is a JS Fiddle with my working code with a preview.
<div class="outercontainer">
<div class="innercontainerback orangeborder"></div>
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus. Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt. Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis.
</div>
</div>
And below is my CSS
html, body, .outercontainer, .innercontainerback { height: 100%; min-height: 100%; }
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
width: 100%;
}
.innercontainerback, .innercontainer { width: 400px; }
.magenta { background-color: magenta; }
.orangeborder { border: 5px solid orange; }
.innercontainerback {
/*margin-left: auto; margin-right: auto;*/
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y, repeat-y;
opacity: 0.88;
z-index: 1; position: absolute;
/* left: 50%; margin-left: -400px; */
top: 0px;
}
.innercontainer {
/* height: 100%; */
min-height: 100%;
/* margin-left: auto;
margin-right: auto; */
opacity: 1 !important;
position: relative; z-index: 0;
clear: both;
}
.padding1 {
padding-left: 90px; padding-right: 90px; box-sizing: border-box;
padding-top: 32px;
/*margin-top: 32px; */
}
How do I make 2 overlapping elements with the same parent have the same height in CSS of which both divs are not columns, and the z-index differs?
Remove height: 100% from outercontainer and add position:relative to outercontainer
html,
body,
.innercontainerback {
height: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100%;
position: relative;
}
.innercontainerback,
.innercontainer {
width: 400px;
}
.magenta {
background-color: magenta;
}
.orange {
background-color: orange;
}
.innercontainerback {
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y, repeat-y;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0px;
}
.innercontainer {
min-height: 100%;
opacity: 1 !important;
position: relative;
z-index: 0;
clear: both;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainerback orange"></div>
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>
Or simplify your code with a pseudo element and the use if vh unit to avoid all the cascading height/min-height
body {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.outercontainer {
min-height: 100vh;
display:flex;
width: 400px;
}
.magenta {
background-color: magenta;
}
.innercontainer::before {
content:"";
background-image: url('https://i.imgur.com/vvaALIn.png'), url('https://i.imgur.com/trZrIdu.png');
background-position: left, right;
background-repeat: repeat-y;
background-color: orange;
opacity: 0.88;
z-index: 1;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
}
.innercontainer {
position: relative;
}
.padding1 {
padding-left: 90px;
padding-right: 90px;
box-sizing: border-box;
padding-top: 32px;
}
<div class="outercontainer">
<div class="innercontainer padding1 magenta">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis id tellus vitae ultrices. Phasellus elit leo, vulputate et malesuada ac, venenatis vel augue. Mauris maximus ex ac orci blandit auctor. Praesent lectus dolor, pretium vitae ultricies
vel, accumsan a ante. Fusce blandit semper suscipit. Vivamus ultricies ipsum et finibus malesuada. Aliquam tempor, tellus in bibendum fringilla, nunc lacus posuere sem, nec elementum enim eros a massa. Maecenas eleifend elementum nisi accumsan luctus.
Aenean ac tortor mollis, aliquam magna vel, aliquet sapien. Fusce purus quam, pulvinar quis enim nec, ornare luctus felis. Aliquam consectetur dapibus dictum. Morbi et ex eu risus euismod viverra sit amet sit amet augue. Nam mollis hendrerit tincidunt.
Sed posuere suscipit ipsum id sagittis. Mauris quis sapien vitae mi tristique accumsan. Praesent cursus dui vehicula leo viverra venenatis. Donec gravida lorem in quam lobortis iaculis. Mauris in feugiat turpis, ut mollis odio. Duis tincidunt massa
malesuada, suscipit orci et, laoreet odio. In ultrices vel metus eget varius. Vivamus quis libero eu lacus mattis varius. Vestibulum venenatis nisl at ligula gravida iaculis. Vestibulum metus diam, laoreet non mi et, euismod tempor dui. Integer eu
sapien ut lectus sodales cursus. In nisi nunc, faucibus feugiat velit non, molestie faucibus odio. Curabitur pretium accumsan turpis consectetur gravida. Suspendisse viverra enim a est egestas, vel lobortis augue cursus. Vivamus dignissim porta varius.
Mauris gravida id augue eget convallis. Nam id dui nec arcu dapibus congue. Sed imperdiet facilisis elementum. Nam sed magna in massa finibus viverra ac vel tortor. Morbi iaculis sollicitudin dolor vulputate luctus. Donec efficitur arcu at mauris
euismod, sit amet fermentum enim elementum. Praesent sapien sem, fringilla quis elementum a, auctor nec elit. Nunc sed justo non diam efficitur elementum. Aliquam sit amet turpis augue. Quisque ullamcorper nunc in facilisis lacinia. Mauris molestie
nibh ipsum, vitae malesuada neque blandit pharetra. Nunc viverra convallis odio pretium dictum. Sed imperdiet massa ac libero scelerisque, eget rutrum lorem accumsan. In ac lobortis nibh. Ut id risus id ante aliquet dictum lobortis eu velit. Curabitur
vitae risus bibendum, condimentum purus et, porta lectus. Nullam non nulla quis urna tincidunt auctor sed a leo.
</div>
</div>
I'm working on a profile-kind-of template – half the page (class="actor-info") should show scrollable text and info about a person and the other half should be filled by the person's portrait picture. The picture should always fill half of the screen – so cropping would be fine.
What I have so far:
all ancestor element set to height 100%
left column and right column are both flex boxes
the image container has the property object-fit: cover;
the image container has the property position:fixed;
the image hight and width are set to auto
Basically it looks 'as if' it worked right – but when changing the browser window with the image doesn't adopt to the width – so at some point the portrait doesn't fill the height.
What I have so far:
<div class="layout">
<div class= "actor-info">
Lorem Ipsum
</div>
<div class="actor-portrait">
<div class="img-container">
<img src="…">
</div>
</div>
</div>
CSS:
html, body, .layout {
width: 100%;
height:100%;
}
.actor-portrait,
.actor-info {
width: 50%;
height:100%;
}
.actor-portrait .img-container {
height:100%;
}
.layout {
align-items: stretch;
display: flex;
width: 100%;
height:100%;
}
.actor-portrait .img-container {
object-fit: cover;
position:fixed;
}
.actor-portrait .img-container img {
width:auto;
height:auto;
}
I hope somebody has done this / been there before? All pointers appreciated! Thank you!
EDIT: I added a 'wireframe' of what i have – and what i would like to have. The image should 'cover' the red rectangle at all times and would get cropped ba the rectangle (.img-container).
As you use predefined width's and height's, you can simplify the code a lot and use background and background-size: cover to accomplish that.
Stack snippet
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
And if you need to set the image source in the markup, you can do that too.
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
If you still want to use object-fit: cover you can, though it has less browser support than background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>
I actually did something similar on a site, but I had a fixed side nav to deal with too: polarlab.anchoragemuseum.org.
I don't remember exactly where I found this code initially, but the trick is the css on the image. I've adjusted the markup and css a bit to accommodate a fixed image.
Here's a fiddle for reference as well.
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Best practices to make page with 3 columns (responsive) (left, center ,right), where left and right column will be fixed , 100 vh and both have fixed width like 200px and not scroll, and center column will be overflow-y: scroll; . ?
Is this what you are looking for http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/3/
.header {
background: blue;
height: 50px;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.container {
width: 100%;
position: relative;
margin: 0;
}
.left {
position: absolute;
top: 50px;
left: 0;
width: 200px;
height: 100vh;
background: red;
}
.right {
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 100vh;
background: red;
}
.middle {
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
background: yellow;
}
You have to set the left and right column to position:fixed; top:0;
for the right column you add right:0; and the width x% you want. Do the same for left but with left attribute.
For the center column you just to set margin:0 auto; width x%;.
Just make sure that if you add your 3 width % it's = 100%.
I made you a JsFiddle : http://jsfiddle.net/Beauceron/Lv750fcb/2/
body{
margin:0;
}
*{
box-sizing:border-box;
}
.header, .footer{
position:fixed;
width:100%;
height:50px;
background:#000;
color:#fff;
text-align:center;
font-size:30px;
}
.footer{
top:auto;
bottom:0;
}
.left, .right {
position:fixed;
width:20%;
top:50px;
padding:10px;
height:100%;
}
.left{
left:0;
}
.right{
right:0;
}
.center{
padding:60px 10px;
margin:0 auto;
width:60%;
}
<div class="wrapper">
<div class="header">HEADER</div>
<div class="column left" style="background:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="column center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet risus nec dolor vulputate pulvinar. Donec fringilla in dolor sed commodo. Sed dignissim lacus quis lacus porta, sed elementum massa aliquam. Aliquam id fermentum arcu, id imperdiet diam. Pellentesque fermentum turpis quis eros dapibus vestibulum. Quisque fringilla tincidunt turpis, quis vehicula nibh fermentum sed. Phasellus pulvinar condimentum arcu, eu sollicitudin orci finibus eu.
Maecenas ornare tempor nisi non varius. Aliquam commodo vulputate consequat. Morbi commodo gravida odio in ultricies. Maecenas quis eleifend turpis, id ullamcorper ligula. Nunc eu sapien dolor. Nam luctus ante nec mi semper, non vestibulum dui vehicula. Vivamus ac placerat arcu. Duis auctor lacinia mi non dapibus. Curabitur pretium erat non justo aliquam, vitae feugiat libero venenatis. Sed varius ex ac lacus lobortis auctor.
Phasellus pretium elit sit amet nisi iaculis varius. Suspendisse eu est eget quam cursus suscipit et non dolor. Duis ac faucibus lorem. Cras maximus sem ullamcorper lacus consequat, ut convallis magna placerat. Sed at arcu turpis. Nunc ut volutpat justo, et tempor tellus. Duis nec sapien ligula. Cras pulvinar felis ligula, nec fringilla nisl aliquam ornare. Aenean mattis urna lorem, vel rhoncus diam condimentum quis. Quisque pulvinar nec nulla non tristique.
In hac habitasse platea dictumst. Ut quis lorem ac nulla aliquet laoreet. Morbi dignissim, nisi non convallis blandit, lorem massa accumsan odio, et pharetra ex dolor nec sem. Phasellus magna justo, facilisis in tortor ac, molestie accumsan nunc. Morbi finibus lacinia tristique. Nulla pulvinar consequat risus a porttitor. Mauris mollis, velit vel lacinia malesuada, dolor nibh pulvinar nulla, eget mollis nibh sem nec diam. Donec fringilla at ipsum at vehicula. Sed commodo porta odio sed ornare. Curabitur porttitor vulputate nulla, id bibendum lectus finibus id. Nulla a neque eget urna pharetra sollicitudin. Donec eget ex sed est mattis feugiat. Proin id arcu ac nulla elementum porttitor.
Ut condimentum ligula nec nisi efficitur, non ullamcorper tellus viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc scelerisque mauris ut ex tristique, at pretium metus pharetra. Nam quis leo id dolor ultricies placerat. Sed massa libero, facilisis id felis id, vehicula convallis est. Duis rutrum, ante sit amet rhoncus ultricies, turpis diam pharetra arcu, vel mattis diam orci eu metus. Aenean in nisl enim. Integer congue sit amet quam et luctus. Quisque dapibus consequat tortor, ac sagittis purus tristique ut. Duis efficitur non elit eu porttitor. Nullam sit amet nibh tortor. Nulla dictum lobortis tristique. Sed egestas pretium placerat. Ut sit amet tincidunt elit. Aliquam cursus libero erat.
Nulla rutrum maximus eleifend. Nam at odio ac velit lacinia sagittis. Quisque sollicitudin sem sapien, sit amet tincidunt lectus molestie id. Nam sagittis dolor eu purus elementum, eu mattis erat feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed rutrum risus nec tincidunt volutpat. Sed ultricies, tellus vel imperdiet venenatis, libero diam lobortis augue, eget eleifend mi nisl et est. Phasellus placerat lacus vel erat imperdiet sodales. Vivamus vel purus id turpis convallis elementum molestie ac libero. Suspendisse tortor diam, pretium id ipsum vitae, sollicitudin viverra odio. Pellentesque faucibus lacinia neque at malesuada.
Nam mi magna, pretium sed rhoncus ut, laoreet eu eros. Phasellus porttitor lectus non elit ultricies, sit amet consequat quam venenatis. Sed sit amet fringilla purus. Maecenas vitae nisl venenatis, pretium leo vel, sodales nulla. Aliquam erat volutpat. Mauris ipsum nisl, commodo rutrum nisi eget, placerat dapibus velit. Aenean condimentum pharetra sapien, a aliquam dui lobortis ut. Suspendisse tempus fringilla accumsan. Morbi vitae faucibus orci.
Suspendisse potenti. Sed massa justo, sollicitudin sed augue sit amet, tempor rutrum erat. Nunc eu porttitor ligula, a hendrerit leo. Cras pulvinar dapibus justo, in vulputate orci pharetra ac. Nulla facilisis at nibh a dignissim. Quisque condimentum condimentum ex, a vulputate dui. Praesent cursus blandit semper. Cras ac nisi sed ex dapibus feugiat. Suspendisse accumsan luctus arcu eget rhoncus. Maecenas sodales lacus a lacus condimentum tristique. Curabitur id dolor varius, pretium mi non, dignissim metus. Ut quis enim aliquam, eleifend purus sit amet, bibendum nisl. Nullam vel placerat neque, ut rhoncus lectus. In in aliquet erat. Morbi bibendum, metus non lacinia venenatis, risus turpis viverra est, semper aliquam purus est a nisi. Suspendisse potenti.</div>
<div class="column right" style="background:yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="footer">FOOTER</div>
</div>
I have a layout like this:
[left-image] | [title-------------------------------------]
(width up to 150) | [left-floated-p -----------[right-floated-p]
|
| lots of text................................
The only way I could implement this is by using float:left on the "left-image" and display:table-row on the contents from the right side.
The problem is that this doesn't seem to work in IE 7 :(
Are there any fixes for it? or other alternatives to implement such a layout?
note that I can't use margin-left on the right blocks because I don't know the exact size of the left image + I have 2 floats on the right side and clearing them messes up the layout...
Unfortunately IE 7 doesn't support it. A quick solution:
CSS
<style type="text/css">
#wrapper {
width: 800px;
margin: 0 auto;
}
#leftcol {
width: 150px;
}
#rightcol {
width: 650px;
}
#twocols {
overflow: auto;
}
#leftp,#rightp {
width: 325px;
}
#leftcol, #leftp {
float: left;
}
#rightcol, #rightp {
float: right;
}
</style>
HTML
<div id="wrapper">
<div id="leftcol"><img src="yourimage.jpg" /></div>
<div id="rightcol">
<h1>Title</h1>
<div id="twocols">
<p id="leftp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed iaculis augue. Proin accumsan tortor at dui imperdiet pellentesque. In eu purus vulputate orci porta scelerisque. Maecenas eget purus mauris, et sagittis turpis. Phasellus bibendum elit et risus dignissim gravida. Quisque feugiat mauris sit amet urna porta imperdiet. Proin feugiat rhoncus orci dictum mattis.</p>
<p id="rightp">Praesent condimentum, dolor eu aliquet adipiscing, neque est vestibulum nunc, id dignissim tortor risus sed tortor. Donec luctus scelerisque ornare. In fringilla ullamcorper erat, convallis adipiscing nulla adipiscing ut. Nunc convallis consequat tellus ut aliquam. Vivamus tortor tortor, lacinia eget dignissim sed, pharetra ac risus. Vestibulum quis condimentum turpis. Maecenas magna tellus, dignissim eu suscipit id, placerat quis metus.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nulla quis tempus tempus, arcu velit elementum risus, consectetur rutrum diam odio vitae mi. Curabitur euismod tincidunt ipsum, id volutpat lectus bibendum eget. Nam at pulvinar felis. Vestibulum non lectus id turpis congue tempor sed eget orci. Sed pellentesque felis vitae augue cursus ac gravida arcu tincidunt. Aenean et sem lectus. Curabitur vehicula odio lorem. Morbi ultricies fermentum dolor, vitae convallis leo condimentum at. Pellentesque faucibus justo non enim varius varius. Nulla accumsan feugiat orci, egestas laoreet mauris rhoncus non. In lacinia purus in magna pulvinar et sollicitudin urna mollis. In eleifend augue ac sem suscipit eget adipiscing odio gravida. Nam tincidunt dui pharetra lacus bibendum volutpat. Integer faucibus luctus magna, et eleifend metus iaculis vitae. Cras imperdiet dignissim mi, porta elementum elit dignissim non. Ut egestas congue elit quis volutpat. Nunc ac massa neque.</p>
<p>Praesent id lectus felis. Phasellus sapien leo, ultrices nec rhoncus a, tincidunt in lacus. Mauris tincidunt volutpat nisi, quis viverra ligula pellentesque semper. Phasellus sem sem, tristique vitae sollicitudin eu, tincidunt egestas felis. Aliquam id nunc augue. Integer lectus dolor, lacinia non pellentesque non, elementum at lorem. Donec nec vulputate magna. Vestibulum lobortis risus a elit fringilla dapibus congue tellus tincidunt. Nulla a eleifend justo. Sed nec nisl augue, id vulputate ante. Vestibulum dapibus tristique nisl, non consequat nisi bibendum sit amet. Phasellus quis diam orci, et fringilla est. Morbi quis aliquam ante. Donec bibendum suscipit magna tempus feugiat. Mauris ultricies, neque sed venenatis lacinia, nulla magna scelerisque libero, vitae pharetra urna mi eget nunc. Nullam tellus quam, sagittis a volutpat id, imperdiet vel libero. Curabitur fringilla velit id ligula faucibus dapibus. Aliquam id augue leo. Aenean ac felis vel lectus commodo tempus.</p>
<p>Fusce facilisis facilisis enim et pharetra. Vivamus luctus pellentesque accumsan. Mauris sem metus, ullamcorper vel ornare in, eleifend id risus. Pellentesque viverra lacinia nulla eget hendrerit. Integer consequat egestas placerat. Etiam libero nisl, euismod in tristique ac, convallis eget purus. Nulla vulputate quam sit amet purus consectetur dapibus. Etiam aliquet purus non felis sagittis porta. Fusce id libero nibh. Ut auctor odio sed leo iaculis ut faucibus leo blandit. Maecenas imperdiet enim imperdiet elit hendrerit mattis. Etiam mauris ipsum, malesuada eget posuere eget, molestie quis sem. In commodo consequat arcu laoreet fermentum. Duis et magna massa, et molestie magna.</p>
</div>
</div>
You would need to make the text and headline prettier, but this works.
The best alternative for implementing such a layout would be using a grid framework like blueprintcss, yahoo grid etc.
I think something like this would work
<div id="wrapper">
<div id="leftImage">Hello</div>
<div id="rightSide">
<!-- Right side things here -->
</div>
</div>
#wrapper {
width:400px;
height:400px;
background:red;
}
#leftImage {
position:absolute;
width:200px;
height:200px;
background:blue;
}
#rightSide {
position:relative;
width:200px;
height:200px;
background:green;
float:left;
margin-left:200px;
}
With the same HTML code used by Gert G in his answer, here is an alternative using display: inline-block;:
#wrapper {
width: 960px;
}
#leftcol {
display: inline-block;
width: 150px;
vertical-align: top;
}
#rightcol {
display: inline-block;
width: 800px;
}
Conditional comment for IE<8
#leftcol, #rightcol { display: inline; zoom: 1; }
#rightcol can have a width of 810px IF you strip whitespace between ending tag of #leftcol and the beginning one of #rightcol
if height of title & paragraphs height are static/
just write a margin-bottom to your left image. you dont need a extra column at right of the page/
height (title & paragraphs) = X;
margin-bottom (img) = X + 100; (for your text;)
btw text should be in a division/
max-width (img) = 150px;
min-width (div.all or body) = width(img)+width(your text at right) /
In the following example, I am trying to put the child div (the pink rectangle) to lay at the bottom of its parent div.
I tried to use the suggestion that I found this stackoverflow thread but it didn't help.
Any idea?
<html>
<style type="text/css">
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
bottom: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>
make the parent "position: relative" and the child "position: absolute". Then you can position the child "right: 0; bottom: 0"
<html>
<style type="text/css">
.a {
position: relative;
background: gray;
height: 80px;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
the parent
<div class="b"> child
</div>
</div>
</body>
<html>
Edit: Full HTML to show what is discussed in the comments.
<!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">
<head>
<style type="text/css">
.a {
background: gray;
position: relative;
}
.b {
background: pink;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<body>
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut quam sapien, id dictum purus. Ut vel consectetur justo. Sed suscipit justo ullamcorper diam interdum laoreet pulvinar nisl laoreet. Sed sem est, feugiat commodo bibendum vel, laoreet ac sapien. Fusce nisl nulla, commodo ut ultricies ut, iaculis a dolor. Nunc ultrices elit at tellus scelerisque vel vestibulum justo pretium. Suspendisse potenti. Suspendisse nec felis sem. Donec at tellus dolor, vehicula placerat lacus. Ut non libero at massa convallis imperdiet non rhoncus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nibh velit, congue quis tincidunt sed, feugiat a turpis. Phasellus erat justo, dictum non iaculis sit amet, auctor quis neque. Cras leo tortor, consequat non tincidunt sed, lacinia ut nibh. Etiam eu mollis quam. In eu felis velit, at bibendum sapien. Aenean sed est urna. Sed dignissim dapibus dolor sed pellentesque. Aliquam viverra ipsum sit amet justo gravida in facilisis sapien volutpat.
<p>Suspendisse commodo vulputate nunc, vitae commodo tellus varius eu. Donec adipiscing diam vel felis blandit lobortis. Donec et turpis nunc. Curabitur ac elementum mi. Aenean libero ipsum, lacinia sit amet ornare sed, sollicitudin quis libero. Vestibulum ullamcorper ullamcorper luctus. Aenean pretium ornare tempor. Sed ultricies eros sem. Aenean placerat tristique tellus nec sodales. Proin sed justo non libero condimentum commodo. Quisque sed nisl nisi, vel mattis nisl. Phasellus rhoncus pharetra egestas. Quisque nec arcu ac neque placerat rutrum. In feugiat justo ac orci dignissim rhoncus. Mauris vitae fringilla magna.
<p>Nam sagittis erat id sapien lacinia ultrices. Pellentesque ultrices, justo vitae blandit convallis, felis mi laoreet sem, in pharetra libero mauris eget nisl. Etiam in mi eget elit bibendum consectetur et nec nibh. Curabitur in justo arcu. Morbi eget venenatis enim. Duis tempor quam lacinia elit consequat sit amet blandit dolor vulputate. Aenean massa libero, suscipit eu tristique id, imperdiet pellentesque justo. Proin rutrum erat sit amet orci iaculis ut lobortis turpis sagittis. Nam luctus mollis mi, nec laoreet urna semper vitae. Pellentesque in massa enim. Etiam fermentum urna vitae lorem consequat pretium. Maecenas id ligula diam, id consectetur purus. Vestibulum libero velit, tempor hendrerit posuere ut, rutrum nec velit. Suspendisse id pulvinar erat. Sed vulputate, nibh id vulputate vestibulum, dolor elit tincidunt est, sed varius neque tellus tincidunt erat. Nunc volutpat eros in diam semper dictum. Quisque ut ligula felis.
<p>Ut pharetra feugiat nisi eu viverra. Praesent sollicitudin iaculis elit, ac lobortis ante consectetur sed. Nullam sit amet enim eget massa dapibus molestie. Donec orci diam, tempor sit amet aliquet eget, placerat in nulla. Sed et sollicitudin mi. Donec pulvinar elit pharetra urna ornare sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mi libero. Ut et ipsum nec enim adipiscing pellentesque a nec quam. Pellentesque viverra, enim id auctor lacinia, turpis leo blandit odio, et luctus orci purus at nunc. Morbi eu sem id diam aliquam egestas. Vestibulum hendrerit lobortis est a convallis. Nunc quis quam odio, a eleifend dolor.
<p>Vivamus sollicitudin convallis diam, ut luctus ipsum viverra in. Morbi sit amet sapien urna, sit amet dictum nisi. Duis elit tortor, iaculis nec feugiat in, aliquam ut nisl. Nulla scelerisque sagittis aliquam. Ut tempus auctor tempus. Aliquam auctor vulputate volutpat. Praesent libero orci, volutpat a volutpat ac, vulputate at enim. Phasellus semper sem sed velit bibendum tempus. Aenean ut mauris nisl. Nam sit amet ipsum arcu. Phasellus pretium venenatis egestas. Ut in nulla sem. Proin aliquet facilisis lectus non consequat. Nullam vel magna et ligula viverra sagittis. Fusce in massa in quam vehicula convallis. Nullam placerat erat in nunc eleifend sed dapibus elit tempor.
<p>Aliquam in erat mi. Suspendisse dui dui, facilisis ac lobortis id, mollis quis enim. Aliquam erat volutpat. Sed in porta arcu. Maecenas aliquam congue sem, at scelerisque odio pharetra ac. In egestas rutrum cursus. Aliquam erat volutpat. Etiam a libero risus. Morbi odio eros, sollicitudin vel mattis vel, aliquet a elit. Suspendisse vel lectus risus, in iaculis ipsum. Etiam vitae justo nibh, non bibendum purus. Quisque mi erat, accumsan sit amet fringilla eu, rhoncus sed ipsum. Ut ac leo a nunc accumsan placerat at ut mauris. Aliquam imperdiet urna urna.
<div class="b"> child
</div>
</div>
</body>
<html>
In order to use the position attributes (top, right, bottom, left), the element's position CSS attribute must be relative, absolute, or fixed.
Also, the positions will be calculated relative to the element's offset parent. In order to make them relative to your .a element, it needs to have position: relative.
In your case, you need to write
.a {
background: gray;
height: 80px;
position: relative;
}
.b {
background: pink;
position: absolute;
right: 0px;
bottom: 0px;
}
.b needs position:relative; absolute would position it according to the window size, not to his parent.
there is also vertical-align which gives you a "true" bottom alignment but its only usable with table display properties like table-cell
The best way is using relative/absolute (as mentioned by a bunch of other answers). An alternative (if both the parent and child have known heights) is to set a top margin on the child:
.a {
background: gray;
height: 80px;
}
.b {
background: pink;
float: right;
height: 20px;
margin-top: 60px;
}