Here's an example demonstrating this problem:
http://jsfiddle.net/93twL/
Here's the code (same as the jsfiddle):
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
</body>
</html>
html{
min-height:100%;
height:100%;
}
body{
height:100%;
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px black;
}
h1{
margin-top:0;
}
#container{
clear:both;
width:100%;
height:100%;
float:left;
box-shadow: inset 0 0 1px 1px black;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
float:left;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
As seen in the example by looking at the borders, once the content goes above 100% heigtht, the content overflows. I'd rather have the element expand.
To fix this, one would remove specifying the height. However, if there is no height specified then how am I supposed to control the height of all the content?(using percentages) I need buttons, headers, footers and so on that need a height set to it. (Without HTML and BODY having a 100% height, no other elements will be able to set a height using percentages)
In case it is not clear, I am talking about a fluid layout where the height is given in percentages.
So is this even possible or should I just give this up?
I think what you're after is a fluid width 100% and 100% height, so that the content vertically and horizontally expands. That is a tough thing and can't be done with css alone, flexbox might be able to do it, though I don't know. I saw it recently done with CSS and jQuery using a fixed height on both the header and footer, but the rest is fluid height and width:
http://codepen.io/anon/pen/EsJHu
I made it more responsive here: http://jsbin.com/momep/7/edit
CSS
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Sticky footer */
html, body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
#sticky-footer-wrap {
overflow: auto;
padding-bottom: 100px;
}
.site-main {
overflow: hidden;
height: 100%;
}
.site-footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
/* Header */
.site-header {
height: 100px;
}
#media (min-width:992px) {
/* 3 columns */
#primary {
float: left;
width: 50%;
margin-left: 25%;
}
#secondary {
float: left;
width: 25%;
margin-left:-75%;
}
#tertiary{
float: left;
width: 25%;
}
}
/* Colours */
.site-header {
background: #C5E0DC;
}
#primary {
background-color: #F1D4AF;
}
#secondary {
background-color: #ECE5CE;
}
#tertiary{
background-color: #E08E79;
}
.site-footer {
background: #774F38;
}
HTML
<div id="page">
<div id="sticky-footer-wrap">
<header class="site-header">
<h3>Header</h3>
</header>
<div class="site-main">
<div id="primary">
<h2>Primary content</h2>
<h1>Layout Features</h1>
<ul>
<li>Header (fixed height)</li>
<li>3 fluid columns</li>
<li>100% or full height columns (jQuery)</li>
<li>Sticky footer (fixed height)</li>
<li>Correct source order of columns</li>
<li>IE8 compatible (Modernizr)</li>
</ul>
</div>
<div id="secondary">
<h3>Secondary content</h3>
</div>
<div id="tertiary">
<h4>Tertiary content</h4>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<h3>Footer (sticky)</h3>
</footer>
jQuery
// On page load
$(window).load(columnHeight);
// On window resize
$(window).resize( function () {
// Clear all forced column heights before recalculating them after window resize
$("#primary").css("height", "");
$("#secondary").css("height", "");
$("#tertiary").css("height", "");
columnHeight();
});
// Make columns 100% in height
function columnHeight() {
// Column heights should equal the document height minus the header height and footer height
var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
$("#primary").css("height", newHeight);
$("#secondary").css("height", newHeight);
$("#tertiary").css("height", newHeight);
}
You can replace height with min-height: 100%. And at the end of your HTML add a div with css rule clear: both to clean up all the floating elements.
So it will look like this :
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
<div style='clear:both'></div>
</body>
</html>
I'm not entirely sure what you're attempting to do here, but how about this?
http://jsfiddle.net/9X8j2/
Only the CSS changed:
body{
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px blue;
}
h1{
margin-top:0;
}
#container{
width:100%;
box-shadow: inset 0 0 1px 1px gray;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
I changed the color of the box shadows to tell them apart a little easier.
Removing most of the height attributes may be what you're looking for.. including removing the CSS on the HTML tag. At least now the container does not overflow the body.
Please let me know if this is at all helpful.
Related
The following code results in the scrollbar not being clickable and/or draggable, and this happens arbitrarily in Chrome only.
Is there anything obvious in the code that's causing this?
- If so, how should be fixed?
- If not, how do I continue to troubleshoot it?
I tried working the Chrome debugger but clicking on the sidebar does not reveal anything useful.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image:url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
margin-bottom:23px;
}
#logo {
margin-left:15px;
}
#forum-link {
max-width:110px;
margin-right:35px;
}
#forum-link a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
footer
{
text-align:center;
font-size:small;
}
#media only screen and (orientation: portrait) {
html{
margin: 0;
height: 100%;
}
body{
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header{
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin:initial;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link {
margin: initial;
max-width:initial;
background:#323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link a{
font-weight:bold;
font-size:.9em;
}
#forum-link a:hover{
text-decoration:underline;
}
#content{
flex: 1;
margin: 0px 20px 0px 20px;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85 1x, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquam mi. Nam in dictum nulla. Donec sit amet mollis nunc. Aliquam a elit quis felis finibus accumsan. Vivamus vel pellentesque mauris. Integer et commodo lectus. Donec fermentum urna ac lorem euismod fermentum. Aliquam porttitor, lacus id consectetur auctor, velit est mollis risus, iaculis aliquet massa massa in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et semper orci, sed rhoncus purus. Cras rhoncus accumsan libero nec sagittis. Proin ac ipsum suscipit tortor tincidunt malesuada et at sapien. Morbi mollis ultricies lacus ut blandit.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque sagittis mi. Proin commodo tempor sem at euismod. Nam vel porta mauris. Nunc rutrum libero vitae dui tincidunt, eget condimentum mi semper. Cras gravida nunc vel pulvinar tempor. Nunc rhoncus rutrum justo, vel facilisis ex fringilla in. Sed posuere ex non eros ultrices varius.
<p>
Fusce vestibulum quis arcu ac dapibus. Maecenas felis ante, auctor sed congue ut, convallis a arcu. Nunc vel maximus quam. Nam mauris purus, commodo et leo vel, volutpat sollicitudin libero. Mauris porta lectus nibh, et suscipit ipsum condimentum elementum. Sed sem lectus, aliquet id condimentum id, maximus eget felis. Sed ornare augue libero, eget hendrerit sem porttitor vitae. Ut porttitor vehicula dapibus. Suspendisse at accumsan orci.
<p>
In ante eros, condimentum id elit quis, sagittis bibendum arcu. Phasellus in metus quam. Sed gravida condimentum mi sit amet molestie. Ut blandit tempus libero ut porta. Sed blandit sem eget mi rutrum, at lacinia risus efficitur. Duis rhoncus porta lacus, scelerisque scelerisque tellus sodales quis. Nunc maximus ex et placerat commodo. Curabitur quis bibendum tortor. Sed condimentum vel urna laoreet mollis. Quisque molestie orci sed sodales porttitor.
<p>
Morbi ipsum erat, varius eu eros id, porta vestibulum nulla. In mattis dolor nisi, ut luctus dolor cursus a. Phasellus tempor diam enim, a accumsan justo dignissim sit amet. Vestibulum congue, arcu non accumsan rutrum, tortor augue sodales lacus, eu fermentum leo odio eu nibh. Cras non urna non leo imperdiet varius. Vestibulum eget magna metus. Curabitur eu tempor magna.
</div>
<footer>
<div id="copyright">© Copyright text</div>
</footer>
</body>
</html>
We've been looking all over the web, but can't find a solution to a seemingly unsolvable problem basically we've got two divs who need to be equal in height. In them we've got multiple other divs who need to scale in height with them.
We tried 100% height, flexbox, inherit, overflow hidden and other things we could think of. To no avail.
This is a simplistic view of what we've got:
.col-sm-12 {
width: 100%;
display: flex
}
.col-sm-6 {
width: 50%;
float: left;
flex: 1;
}
.c1 {
}
.c2 {
padding: 20px;
}
.c3 {
border: 1px solid grey;
padding: 20px;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can we get the two boxes below the image to equal height?
Any help is appreciated!
There is no CSS method of equalising heights of elements that do not share a parent. If the top image is always the same height between columns you can use flexbox to expand the smaller/shorter column though.
.col-sm-12 {
display: flex;
}
.col-sm-6 {
width: 50%;
flex: 1;
display: flex;
flex-direction: column;
}
.c1 {
flex: 1;
display: flex;
flex-direction: column;
}
.c2 {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.c3 {
border: 1px solid grey;
padding: 20px;
flex: 1;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo
ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum
enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla
eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
Just use inline-style on the text div tags:
style="height:30em;overflow:scroll"
lol. There might be a lot of new, flashy and sexy frameworks & technologies out there (which I really like), but sometimes going back to the old school methods is a lot simpler and more efficient.
I have 3 div, 2 are floating left and the other floating right. However it is not aligning in the way I want.
.numb1, .numb2 {
float: left;
width: 60%;
display: inline-block;
}
.numb3, .numb4 {
float: right;
width: 35%;
display: inline-block;
}
Here is a snippet so you have an idea of what problem; https://jsfiddle.net/rnty32gt/
I want the class numb3 to be aligned with numb1. I tried to use inlineblock but it is not working. Sorry for my English.
Make this way using this css and html
.numb2 ,.numb3 {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
This is how you could do it to have it fixed as you wish. But you could also use flex-box. Here is some info about flex-box: https://www.w3schools.com/css/css3_flexbox.asp
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
So as you can see i have changed the order of div2 and div3 in your HTML.
There you go.
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
margin:0px;
float: left;
width: 60%;
border:none;
}
.numb1, .numb2 {
}
.numb3 {
float: right;
width: 35%;
}
<div class="wrap-l">
<div class="numb1">
Text 1
</div>
<div class="numb2">
Text 2
</div>
</div>
<div class="numb3">
Text 3
</div>
give width: 30%; for numb1 and numb 2
If you want to use floats, just put the .numb3 above the other divs in your markup : https://jsfiddle.net/5vbvjwcs/
Otherwise you can use flex :
section {
display: flex;
}
.leftColumn {
width: 60%;
}
.content {
padding: 10px;
background-color: #eaeaea;
margin: 10px;
flex: 1;
}
<section>
<div class="leftColumn">
<div class="content">
Numb1
</div>
<div class="content">
Numb2
</div>
</div>
<div class="content">
Numb3
</div>
</section>
Doe,
If you want div.numb3 align with div.numb1 you should change the order like this:
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
margin-left: 12.5%;
margin-right: 12.5%;
margin-top: 24%;
width: 25%;
}
<section>
<aside class="aside">
<div class="container-text">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
I have a layout with an aside that takes up half the screen. The content inside the aside will stay fixed for a period of time. That's being stored in the container-text container. I would like everything in this container to stay fixed, however I would like the "hello" header text both horizontally and vertically centered. The "how" "are" "you" should be be at the bottom of the screen, centered with space between (they will be navigation). I managed to center a fixed container, but could not position the navigation. It is responsive left/right, but not top/bottom (I would like nav to stay at bottom and "Hello" to stay centered).
Is this what you are looking to achieve?
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
display:flex;
justify-content:center;
align-items:stretch;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
height: 100vh;
display:flex;
}
.container-text-inner {
height:50%;
position:relative;
top:50%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.container-nav {
display:flex;
flex-wrap: no-wrap;
margin-bottom:15px;
}
.container-nav p {
margin-right:15px;
}
<section>
<aside class="aside">
<div class="container-text">
<div class="container-text-inner">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
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.