I think this a noob question and already answered but I failed to find the answer.
codepen
I am making a simple 2 column layout. columns are working fine but footer goes to sidebar area if content area is taller than sidebar area.
HTML:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
<html>
<head>
</head>
<body>
<div class="wrapper"> <div class="container">
<div class="col span_2_of_3">
<div>Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. Sed at ante finibus, porttitor nunc sit amet, interdum tellus. Suspendisse tincidunt lectus a enim tincidunt, quis semper tellus luctus. Mauris ut dui dolor. Donec imperdiet fringilla ornare. Nunc in lectus magna. Curabitur at purus libero. Nunc ultricies scelerisque felis. Proin tristique, odio id pharetra condimentum, metus libero porta lacus, at eleifend justo sapien eu ipsum. Donec vel purus gravida, convallis ligula id, scelerisque urna. In eleifend mattis mauris sit amet pharetra. Praesent eget libero augue. Vestibulum ut justo hendrerit, ornare erat sit amet, tristique augue. Quisque tortor ex, pulvinar sit amet elementum nec, fringilla eu urna. Fusce interdum convallis felis, sit amet posuere nulla ornare a. Quisque quis vulputate lacus. Proin mollis lectus mi, sed egestas nibh mollis in. </div>
</div>
<div class="col span_1_of_3">
Here is widget content
</div></div></div>
<footer>
<div class="container">
This is footer content
</div>
</footer>
</body>
</html>
http://codepen.io/anon/pen/azyEbb
You forgot to close one div, and your footer needs
footer {
clear: both;
}
as well.
Same solution as that from Sirence, just other code:
CSS:
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
HTML:
<html>
<head>
</head>
<body>
<div class="wrapper clearfix">
<div class="container">
<div class="col span_2_of_3">
<div>Sed at a...stas nibh mollis in.</div>
</div>
</div>
<div class="col span_1_of_3">
Here is widget content
</div>
</div>
<footer>
<div class="container">
This is footer content
</div>
</footer>
</html>
Related
i have no idea how to put yellow(bottom) div exactly under the pink(left) one.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
clear: both;
width: 399px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
</div>
</div>
</body>
</html>
clear: both is causing the div to do just that, clear both sides and force itself into a position where the blue element isn't right next to it.
Remove that and it'll be right under the one above it.
Hi please check the update code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
width: 399px;
background-color: yellow;
}
.pull-left
{
float:left
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="pull-left">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p>
</div>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
</div>
</div>
</body>
</html>
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar
So I have two divs, one is a .header and the other is the .content, together they would take up the whole page. The .header would be set in place and only the content would scroll.
I would like to make the content's height to be dynamic based on the height of the .header without javascript.
This could be achieved with a calc if the .header had fixed height, but it doesn't because the height can vary.
Code:
.container {
height: 100%;
}
.header {
height: 50px; // height is fixed, not great for dynamic content
}
.content {
height: calc(100% - 50px); // height is a subtraction
}
<div class='container'>
<div class='header'>Header</div>
<div class='content'>
Content
</div>
</div>
See switching of content here
Is there a CSS only solution in which would calculate the height of the .content based on the size of the .header?
you can use flexbox for that
html,
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height:100%
}
.header {
display: flex;
border: 5px solid red
}
.content {
flex: 1;
border: 5px solid green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>
Or CSS tables for older browsers (as OP requested in comment)
html,
body {
margin: 0;
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%
}
.header {
display: table-row;
background: red
}
.content {
display: table-row;
background: green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>
Use display: flex
html, body { margin: 0; height: 100%; }
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background: blue;
}
.content {
flex: 1;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
Or display: table
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
And merged with fallback, where flex kicks in if supported.
Note, the header's height: 0 is needed if it should shrink to content
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
#supports (display: flex) {
.container {
display: flex;
flex-direction: column;
}
.header {
display: block;
height: auto;
}
.content {
flex: 1;
display: block;
}
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
I have two questions.
First, which css rule will make a div be highlighted in the Chrome Inspector? All I know is that float: left, and overflow: hidden will make a div show up/highlighted in the Inspector. For example, in the code in the link below, when you use Chrome Developer Tools, and click/hover on <div class="center">, the area that was supposed to be highlighted didn't show. If you click/hover on <div class="content"> or <div class"image"> you can see the area that are highlighted in light blue.
Secondly, How do I keep the image stick to the bottom of the responsive div with content inside?
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Suspendisse ac porttitor purus. Duis consequat condimentum tincidunt. Donec rhoncus maximus diam, ac bibendum neque mollis vitae. Vivamus vel mauris vel ex vulputate porta. Praesent convallis elit odio, et vehicula quam vulputate vitae. Aliquam porttitor porta justo sed semper. Nunc tristique tellus arcu, id vestibulum mi gravida id. Nulla a interdum dolor. Aenean mollis purus ac sagittis semper. Nulla ipsum neque, blandit eu tempus eget, condimentum id erat. Mauris vitae nibh in arcu ultrices porta ut id nisi. Donec dapibus eros vulputate magna ultrices bibendum. Fusce libero dui, malesuada eget gravida ut, semper vel mi.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
</div>
CSS
.center {width: 100%; position: relative; display: block; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; position: relative; height: 400px;}
.image img { position: absolute; bottom: 0; right: 0; vertical-align: bottom;}
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
Code in action: http://codepen.io/kikibres/pen/MwBxBK
As you can see, for the image to stick to the bottom of the div, I need to specific the height of the div for the image to work. Otherwise, it just sit out of div on top / outside of div. How do I make it stick to the bottom while making the height responsive?
Additionally, if you use Chrome Inspector / Developer Tools on this code at codepen, you can also see that <div class="center"> isn't highlighted.
Ok here's my answer.
Please take a look at this fiddle first.
Answer to Question 1:
I believe it happens because of the wrong css usage. if you use float left, It won't take space unless it is cleared by using clear: left;.
Or you can use overflow: hidden on the parent container of the element with float:left.
Answer to Question 2:
Sorry but I have to remove unnecessary css to make the image stick to bottom in smaller screen. You can also achieve this using other approach but this is the easiest way for me.
html,
body{
padding: 0;
margin: 0;
}
.center {
width: 100%;
margin: 50px 0;
padding: 15px;
background-color: #63103C;
color: #fff;
overflow: hidden;
}
.content,
.image {
width: 50%;
float: left;
}
#media (max-width: 768px) {
.content,
.image{
float: none;
width: 100%;
}
}
Position image at bottom of variable height div is a very good answer to my question. I just couldn't find it at first when I was searching for an answer before I post this question...
The key is .clear { clear: both; } in which you put <div class="clear"></div> after the first two divs inside the main div.
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
<div class="clear"></div> <!-- Where you should put it -->
</div>
CSS
.center {width: 100%; position: relative; background-color: #dd1a83; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; }
.image img { position: absolute; bottom: 0; right: 0; border: 3px solid #000;}
.clear { clear: both; } /* Don't forget to put it there too*/
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
I am trying to equalize the height from two div's, #innerwrapper .sidebar and #innerwrapper > .content, residing next to each other (by float: left) from the same parent, #innerwrapper.
I have solved this problem by using jQuery in a seperate file, but since it is a CSS issue, I would prefer solving it by using CSS. I tried several things written on StackOverflow, like using display: inline-block instead of float, or display: inline-table, but it wouldn't fix the problem.
The link to the Codepen is given below.
Do you know a solution in CSS?
Link to Codepen
HTML:
<div id="innerwrapper">
<div class="sidebar">
<div class="menu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
<div class="content">
<!-- content !-->
</div>
</div>
<div class="content">
<!-- content !-->
</div>
</div>
CSS:
#innerwrapper {
width: 66.66%;
margin: auto;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
float: left;
}
.sidebar .menu li {
display: block;
}
#innerwrapper > .content {
width: 80%;
float: left;
}
jQuery:
function equalColHeight()
{
var $col1 = $('#innerwrapper .sidebar');
var $col2 = $('#innerwrapper > .content');
if ($col1.height() < $col2.height()) {
$col1.height($col2.height());
}
}
$(document).ready(function() {
equalColHeight();
});
No need for Javascript, you're right, it's a simple css trick.
Wrap both the content and the navigation into a div, to which you will give the color of the sidebar (in this example, grey). Set the content div to white and with a display:inline-block.
HTML
<div id="innerwrapper">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
CSS
#innerwrapper {
width: 66.66%;
margin: auto;
background-color:#DFE2DB;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
float: left;
}
#innerwrapper > .content {
width: 85%;
display: inline-block;
background: #fff;
}
Plunker Here
As Mr.Alien commented you can using table-cell; or flex.
I have deleted all your jQuery and placed in the CSS needed to make this possible using display: table-cell;.
Changes in CSS
#innerwrapper {
width: 66.66%;
margin: auto;
display: table; /* Floats gone and added display table to parent */
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
display: table-cell; /* Floats gone and added display table-cell */
}
#innerwrapper > .content {
width: 85%;
display: table-cell;/* Floats gone and added display table-cell */
}
Demo using changes
*,
*:after,
*:before {
margin: 0;
padding: 0;
}
html {} body {
background-color: #191919;
}
header {} #title {
font-family: serif;
font-size: 1.1em;
margin: auto;
width: 66.66%;
color: #DFE2DB;
height: 6em;
}
#navwrapper {
background-color: #FFF056;
}
#navwrapper .menu {
font-size: 1.1em;
font-family: sans-serif;
margin: auto;
width: 66.66%;
}
#navwrapper li {
background-color: #E6D84D;
padding: 0.1em 0.5em;
display: inline-block;
}
#mainwrapper {
background-color: #FFFFFF;
}
#mainwrapper:after {
content: "";
display: table;
clear: both;
}
#innerwrapper {
width: 66.66%;
margin: auto;
display: table;
}
#innerwrapper .sidebar {
width: 15%;
background-color: #DFE2DB;
display: table-cell;
}
.sidebar .menu li {
display: block;
}
#innerwrapper > .content {
width: 85%;
display: table-cell;
}
<header>
<div id="title">
<h1>Something</h1>
</div>
</header>
<div id="navwrapper">
<div class="menu">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
</div>
<div id="mainwrapper">
<div id="innerwrapper">
<div class="sidebar">
<div class="menu">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
<div class="content">
Phasellus quis libero eros. Maecenas at mauris ornare, vestibulum nulla sit amet, blandit mauris. Pellentesque ut luctus magna, vitae aliquam diam. Nam egestas urna quam, ac tincidunt lorem ornare non. Morbi non leo at enim lacinia tincidunt.
</div>
</div>
<div class="content">
<p>
Integer quis auctor nibh, in pellentesque mi. In et rutrum mauris. Suspendisse rutrum bibendum arcu, non molestie orci iaculis id. Praesent ornare eros at nibh bibendum congue. Aliquam erat volutpat. Etiam sit amet ipsum eget lectus lobortis viverra ac
sed dolor. Nunc tortor dolor, semper ac lobortis quis, ornare iaculis mauris. Donec convallis quis risus nec suscipit. Aenean vitae tempus sem. Nunc id sollicitudin leo, eu malesuada leo. Cras scelerisque, libero non tristique sollicitudin, metus
lectus eleifend tellus, ac semper odio magna lacinia ex. Vestibulum ante libero, porttitor a turpis eget, mattis blandit ipsum. Nulla et ipsum vel mi aliquet porttitor non in enim. Sed nec nibh bibendum, facilisis lorem vel, tempus nisi. Sed cursus
purus ac elit pulvinar, in fringilla quam eleifend. Fusce non commodo velit, eu tempus nisi. Phasellus lacus lorem, consectetur at metus ut, auctor pretium dui. Vestibulum elit diam, blandit ut neque vitae, tempor mollis ipsum. Vestibulum nec
justo a augue mattis consectetur. In hac habitasse platea dictumst. Cras pharetra nisl eu nulla tempor convallis. Maecenas volutpat consequat luctus. Cras consequat, ligula in ullamcorper egestas, diam sapien aliquam quam, sed iaculis orci odio
id dolor. Integer in dui vestibulum, dictum turpis mollis, rhoncus nisi. In hac habitasse platea dictumst. Praesent id velit euismod, molestie mi eu, volutpat metus. Quisque rhoncus ante id lectus accumsan, scelerisque consectetur velit efficitur.
Maecenas aliquet fringilla feugiat. Aenean feugiat nulla ac tortor elementum, vel ultrices urna malesuada. Mauris et metus id velit semper dapibus sit amet nec mauris. Nulla lectus orci, semper vitae tortor nec, semper efficitur metus. Quisque
accumsan, enim vel sollicitudin feugiat, augue velit tincidunt lorem, ac elementum metus leo id tortor. Sed interdum diam mi, nec cursus ante malesuada vel. Sed eu eros eget nisl congue bibendum ut vitae mi. Fusce a mi vel enim dignissim tempor.
Mauris rutrum, arcu sit amet bibendum suscipit, metus tortor imperdiet lectus, non cursus felis risus sit amet tortor. Nullam eu ex a sapien faucibus vulputate vitae eu eros. Proin in enim blandit erat malesuada tincidunt at eu libero. Maecenas
lacinia leo nibh, at pharetra quam iaculis ac. Nunc rutrum purus massa, sit amet rutrum nulla rhoncus sagittis. Duis varius felis eu nisi mattis venenatis. Etiam sit amet suscipit quam, sit amet ultrices dui. Etiam dapibus mollis orci, sed ultricies
elit ornare et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci elit, vehicula et maximus non, posuere eu diam. Aenean quis cursus ipsum, sed mollis quam. Phasellus malesuada lacus
at lacus lacinia imperdiet. Praesent hendrerit lacus at enim consequat, vel ultricies tellus laoreet. Etiam consectetur fringilla ipsum vel blandit. Morbi vehicula ante vel aliquet tincidunt. Vivamus dapibus blandit sodales. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros ac nunc maximus pulvinar et id enim. Proin dignissim metus vitae placerat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan
hendrerit magna, eu porta dolor lacinia non. Ut ultrices aliquam arcu, non dictum turpis maximus a. Proin lacinia viverra nisi, ac interdum sapien. Aliquam facilisis et erat ac efficitur. Nulla sem diam, vulputate eget elit ut, porta viverra quam.
Sed tincidunt augue eu odio volutpat, nec volutpat turpis scelerisque. Mauris at ex nunc.
</p>
</div>
</div>
</div>