I'm sure this has been answered somewhere but I can't seem to find it.
I want the text inside the 2 flexboxed divs to also be inside the 90vw width, but I also want the backgrounds not to be shortened.
Anyways, here is what I have right now.
.width {
width: 90vw;
margin: auto;
}
.container {
display: flex;
}
.top {
background-color: red;
}
.left {
background-color: yellow;
}
.right {
background-color: green;
}
<div class="top">
<p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container width">
<div class="left">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
It may be easier than you think:
add padding: 0 5vw to space either side of .top
padding-left: 5vw to .left
padding-right: 5vw to .right
and a max-width: 100% to .top to keep child elements inside
See the code below.
Make sure to scroll further and examine the extra demo code showing a basic responsive banding pattern without #media queries you can use right out of the box!
/*
.width { REMOVE
width: 90vw;
margin: auto;
}
*/
.container {
display: flex;
max-width: 100%; /*ADD flexbox likes this */
}
.top {
background-color: red;
padding: 0 5vw; /*ADD left and right */
}
p { margin: 0 } /* otherwise some HTMNL default margins */
.left {
background-color: yellow;
padding-left: 5vw; /*ADD align with top */
}
.right {
background-color: green;
padding-right: 5vw; /*ADD align with top */
}
* { outline: 1px dashed } /* show element outlines for debug, remove when done */
<div class="top pad">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container">
<div class="left">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
DEMO ADD: generic responsive banding without #media queries
Currently you can see a lot of (color)banded sites, with a hero, navigation, attractor, intro, gallery, demo, etc. bands with left and right a lot of white space (over 320px on either side on 1920px width displays).
Below a nice little responsive demo (based on your question) you can use right out of the box.
It has
outer .band class acting as a main band container
a .band-inner class holding your required content
several responsive T/L/B/R paddings to generically space the content inside the inner band.
without requiring any #media queries
Check the code for extended comments and go to MathIsFun: Equation of a Straight Line to get an easy, yet eleborate explanation on the math used.
/* responsive root font-size: y=mx+b => p1(320,14) p2(1280,20) (see below equations) */
html { font-size: calc(.00625 * 100vmin + .75rem) }
/*
using "Intercept-slope" equation: y = mx + b for points p1(x1,y1), p2(x2,y2)
where m = (y2-y1)/(x2-x1)
b = y1 - m * x1
x = 100VMIN/VH/VW (use vmin for fonts, vh for heights, vw for widths)
*/
.band { /* main flexbox container for banded page layout */
display: flex;
flex-flow: row wrap; /* a row of several columns */
}
.band-inner { /* immediate child element, flexbox containers too */
display: flex;
flex-flow: row wrap; /* some default preferences */
flex: 1 1 20rem; /* grow to max available space, but wrap when less than 320px (mobile) */
}
.band-inner > * { /* for mobile support: all inner child elements fill available space, also wrap at 320px */
flex: 1 1 20rem; /* grow to max available space, but wrap when less than 320px (mobile) */
}
.pad { /* responsive band padding */
padding: calc(0.025 * 100vh + 0.5rem) /* responsive T/B p1(320,16), p2(1280,40) */
calc(0.19 * 100vw - 2.75rem) /* responsive L/R p1(320,16), p2(1920,320) */
}
.pad-t { padding-top : calc(0.025 * 100vh + 0.5rem) }
.pad-b { padding-bottom: calc(0.025 * 100vh + 0.5rem) }
.pad-l { padding-left : calc(0.19 * 100vw - 2.75rem) }
.pad-r { padding-right : calc(0.19 * 100vw - 2.75rem) }
body, p { margin: 0 } /* otherwise some HTMNL default margins, I always use this */
/* demo */
.band-inner p { padding: 1rem } /* nicely spaced inside parent */
.b1 { background-color: cornflowerblue }
.b2a { background-color: tomato }
.b2b { background-color: yellowgreen }
* { outline: 1px dashed } /* show element outlines for debug, remove when done */
<div class="band">
<div class="band-inner pad">
<p class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
<div class="band">
<div class="band-inner pad">
<p class="b2a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
<p class="b2b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
I moved your class width and put it along your top and instead I added padding to the left and right side of the p.
Originally, from the code you posted in your question, the red upper container was not following your 90vw that you wanted so I had to change it.
.width {
width: 90vw;
margin: auto;
}
.width_half {
width: 45vw;
margin: auto;
}
.container {
display: flex;
}
.top {
background-color: lightblue;
}
.left {
background-color: lightgreen;
}
.right {
background-color: silver;
}
.left p,
.right p {
padding: 0 3vw;
}
<div class="top">
<p class="width">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="container">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum magna mauris. Curabitur ultrices velit velit, non pulvinar dolor vulputate non. Duis tempus sodales eleifend. In eleifend posuere justo, id dignissim lacus sollicitudin ac. Cras cursus turpis at dignissim dignissim. Ut molestie lectus id dui rutrum, sed faucibus quam hendrerit. Nulla facilisi. In vitae massa nec purus dapibus dictum.</p>
</div>
</div>
Related
I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:
a fixed navbar at the top,
a main area
a footer at the bottom of the page (not sticky).
In the main area I want to create a sidebar that is between the navbar and the footer.
Here is one of my attempts
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: grey;
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.main {
padding-top: 50px;
min-height: calc(100vh - 150px);
}
.footer {
background-color: blue;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar {
height: 100%;
width: 10%;
position: absolute;
z-index: 1;
left: 0;
background-color: orange;
overflow-x: hidden;
}
.content {
margin-left: 10%;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
Vestibulum sed lectus nisi.
Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis
quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non
ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar
sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non
pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras
lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
</div>
Unfortunately the sidebar does not reach the footer. If I use position: "absolute"; it covers the footer. I also tried using two div side by side with flex, but without success.
How can I get a sidebar that adapts to the content of the main (between navbar and footer), ensuring that the main has a minimum height of 100vh - 150px to keep the footer at the bottom of the page?
Any help is greatly appreciated
Here problem your css code.
just replace .main class code below
.main {
min-height: calc(100vh - 150px);
position: relative;
}
Without changing your markup, you can use Flexbox to get the layout you want:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.navbar {
background-color: grey;
flex-basis: 50px;
padding: 5px;
}
.footer {
background-color: blue;
flex-basis: 100px;
padding: 5px;
}
.main {
flex-grow: 1;
display: flex;
}
.sidebar {
flex-basis: 10%;
background-color: orange;
padding: 5px;
}
.content {
padding: 5px;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox | CSS-Tricks
If you were willing to change your markup, or use display:contents on your main element, you could use Grid layout instead.
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 10% 1fr;
grid-template-rows: 50px 1fr 100px;
grid-template-areas: "navbar navbar" "sidebar content" "footer footer";
}
.navbar {
background-color: grey;
padding: 5px;
grid-area: navbar;
}
.footer {
background-color: blue;
padding: 5px;
grid-area: footer;
}
.main {
display: contents;
}
.sidebar {
background-color: orange;
padding: 5px;
grid-area: sidebar;
}
.content {
padding: 5px;
grid-area: content;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Grid Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Grid | CSS-Tricks
Using CSS grid, I would like to have a single, centred column with a max-width of 1024px.
Here's how I'm currently doing it.
.grid {
display: grid;
place-items: center;
width: 100%;
background-color: #f5f5f5;
}
.grid__content {
max-width: 1120px; /* To make the content size 1024px, 96px is added to account for padding */
width: 100%;
padding: 48px;
background-color: #ccc;
box-sizing: border-box;
}
<div class="grid">
<div class="grid__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc nunc, viverra quis varius et, iaculis condimentum odio. Sed sed commodo massa. Nulla a facilisis quam. Praesent sed nisl arcu. Aenean justo ante, eleifend at aliquet a, congue sit amet ipsum. Integer nunc ligula, tincidunt vel augue vel, pretium ultrices est. Aliquam non risus varius, pretium ex et, eleifend est. Suspendisse pretium urna velit, quis ultricies lacus porta nec. Nullam aliquet elit vitae dolor molestie, sed tristique diam vehicula. Phasellus volutpat placerat nunc.</p>
</div>
</div>
Can the same layout be achieved with grid-template-columns instead of the properties I've set on .grid__column?
I need to fix the following code so that child elements were 100% height of its parent. Chromium and Firefox debugging tools show that parent element (footer) has non-zero height. So children should have the same height.
HTML
<div class="footer">
<footer class="clearfix">
<section class="path">
<img height="474px" src="../../src/images/api-maps.yandex.ru.png">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
<footer class="clearfix"></footer>
</footer>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.clearfix {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div.footer {
width: 100%;
}
div.footer footer {
background-color: black;
width: 100%;
overflow: hidden;
}
footer.clearfix {
border-top: 6px solid grey;
}
footer section {
float: left;
width: 33.333%;
height: 100%;
}
section.path {
background-color: red;
}
section.path img {
width: 100%;
display: block;
}
section.info {
background-color: blue;
}
section.links {
background-color: yellow;
}
I can't figure out why it doesn't work.
The footer has no height of its own, just what is implied by the image in the content so height:100% won't work.
As mentioned in the comments by raplh.m
the height on the container would have to be explicit. A better approach is to use flexbox, or display: table, which is better supported. That is, display: table on the container and display: table-cell on the sections within.
In fact you can use both and if the browser supports flexbox it will use that in preference to display:table.
As a bonus...you don't need to clear any floats because there aren't any.
footer {
display: table;
table-layout: fixed;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
section {
display: table-cell;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
img {
display: block;
margin: auto;
}
.path {
background: red;
}
.info {
background: yellow;
}
.links {
background: blue;
}
<footer>
<section class="path">
<img height="474px" src="http://lorempixel.com/output/city-h-c-200-474-10.jpg">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
</footer>
Codepen Demo
Since you are using percentage heights, you need to specify the height of parent elements.
Try this:
html, body { height: 100%; }
.footer { height: 100%; }
footer { height: 100%; }
DEMO: http://jsfiddle.net/1krrxb87/
For a clear understanding of how the height property works with percentage values, see my answers here:
Why is the 'height' property with percentage value not working on my div?
Percentage height not working in nested flexbox layout in Chrome
This is also possible without use off flexbox or display:table
When you need footer to be atleast have an cross browser height off 100% off the parent you need these CSS rules
footer {
min-height: 100%;
height: auto !important;
height: 100%;
}
To have three floated sections that will have 100% height and appear equal height you can use this HTML and CSS code.
HTML
<footer>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<div style="clear:both;"></div>
</footer>
CSS
html, body {
height: 100%;
background-color: green;
}
footer {
background-color: yellow;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden;
}
footer section {
float: left;
width: 33.33%;
background-color: red;
padding-bottom: 999999em;
margin-bottom: -999999em;
}
see demo http://jsfiddle.net/gfoff12w/3/
Note the CSS rules padding-bottom: 999999em and margin-bottom: -999999em these CSS rules will force the browser to create an "height" on the floated section elements.
I have the following css code:
.tos{
width: 500px;
margin: 0 auto;
}
.tos-logo{
width: 10px;
margin: 0 auto;
}
and I want to put my logo (inside tos-logo div) in the center (horizontally). So far the left border is centered, how can I change it so the center of my image is directly in the middle?
here is my fiddle:
http://jsfiddle.net/pxzr679o/
Setting .tos-logos width makes the div 10px wide, but the <img> inside it still has its original dimensions - hence, it appears that the image is not centered. One way to fix that would be to let the .tos-logo have its original width that spans the whole screen (<div>s are block elements by default), and simply center align its text, like the following:
.tos-logo {
text-align: center;
margin: 0 auto;
}
.tos {
margin: 0 auto;
width: 500px;
}
.tos-logo {
text-align: center;
margin: 0 auto;
}
<div class="tos">
<div class="tos-logo">
<img src="http://placehold.it/100x120" alt="logologologo">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet commodo magna sed blandit. Curabitur vehicula libero mi, ac molestie eros congue ut. Aliquam erat volutpat. Nam pharetra felis sapien, at porta nunc hendrerit a. Integer augue ligula,
pretium accumsan molestie nec, ornare at metus. Nunc in justo dignissim libero fringilla scelerisque ac eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae diam eros. Vestibulum tempus elit in lorem scelerisque rhoncus.
Etiam eu erat arcu. Vivamus at turpis dui. Nulla erat est, iaculis ac leo quis, luctus auctor ex. Nulla sapien ex, egestas quis risus ac, consequat congue odio. Integer tincidunt non metus quis dapibus. Vestibulum at mauris ante. Integer vestibulum
in lectus in accumsan. Ut ligula velit, gravida in lacus in, commodo dignissim metus. Etiam luctus, orci dictum bibendum iaculis, augue dui ultricies risus, vel volutpat nisl ligula id massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis eleifend est tristique turpis lacinia, sit amet gravida neque efficitur. Duis sapien sem, faucibus vitae scelerisque sed, commodo sed lectus.</p>
</div>
</div>
.tos-logo is a block element, which means that naturally it will take the entire width of its parent. If you don't set a fixed with and don't set the margins, you can simply use text-align:center to center any inline or inline-block elements contained within the block element.
Demo
.tos{
width: 500px;
margin: 0 auto;
}
.tos-logo {
text-align: center;
}
I want images with class wide to go over the parent div's padding. When I give them negative margin to do it, they don't stretch to full width (max-width:100% keeps them the same size).
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
<!-- this one should NOT -->
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>
How can I achieve it? I want the image to be left to right without no spaces on sides.
Images without the class wide should be contained inside the paddings as normal.
(ps. giving margin to everything but the images will work, but it's a lot of work and not very elegant)
I'd suggest adding markup as isherwoord suggested, which would allow for better browser support than my answer. If that is not possible, you can use the calc function to add the negative margins to the 100% width. Browser support isn't even that bad!
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
max-width: calc(100% + 40px);
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
<!-- this one should NOT -->
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>
Instead of stretching the image with negative margins, add a container element:
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<div class="wide">
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
</div>
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
</div>