I've stacked my divs to look like unfolded paper. I want to put text on each div, to split them into sections.
But the way I made my divs, the only visible parts are the borders. When I add text to the divs, the text appears above or below where it should show (because they're on the invisible divs).
Basically, my divs are invisible. My borders are visible. I need the text to appear on the borders. But to do that, I have to change the padding for each block of text. Is there a way to put text just on the borders? Or is there an easier way of getting the tilted divs?
I've tried rotateY but It only makes them shrink.
The catch -- I can only use HTML and CSS.
Here is a screenshot of how it currently appears:
CSS:
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
I would personally leave out the border option (it's a bit hacky) and go with something different (and probably easier). Here are a couple of options:
1) Using CSS3 3D Transforms
You tried this one but it didn't work. From what you say in the question, the issue that you found when using rotateY (it only shrank) seems to be because you didn't combine it with perspective. Once you do so (and play a little bit with the values so they adjust to what you are looking for), not only the div will skew but also its content making it look like it's in the same angle as the paper effect.
Here is an example (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
min-width:700px;
}
.slant {
margin:auto auto;
}
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
width:655px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg);
}
#slant3 {
width:668px;
height:225px;
background:#ddd;
transform: perspective(600px) rotateX(20deg) translateY(-33px);
}
#slant4 {
width:642px;
height:225px;
background:#eee;
transform: perspective(600px) rotateX(-20deg) translateY(-33px);
}
<div id="columnwrapper2">
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
2) Using SVG
Another option would be using SVG. This maybe an easier alternative if you don't want the text to skew with the paper folding effect (or one that doesn't require playing with the numbers). It will require you to know the exact height of each section though.
You could create an image in SVG (directly as image or as the code below), and place it in the background of #columnwrapper2, the rest of the content would go on top of the image.
See this demo (also available on this JSFiddle):
html, body {
background:#444;
}
#columnwrapper2 {
width:700px;
position:relative;
}
.slant {
margin:auto auto;
height:250px;
width:600px;
padding:50px auto;
z-index:2;
position:relative;
}
<div id="columnwrapper2">
<svg width="700px" height="1000px" style="position:absolute;top:0;left:0;z-index:1;">
<path fill="#ffffff" d="M0,0 700,0 700,250 0,250Z" />
<path fill="#eeeeee" d="M0,250 700,250 650,500 50,500Z" />
<path fill="#dddddd" d="M50,500 650,500 700,750 0,750Z" />
<path fill="#eeeeee" d="M0,750 700,750 650,1000 50,1000Z" />
</svg>
<div id="slant1" class="slant">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi odio, fermentum eget ex sed, tincidunt consectetur enim. Suspendisse viverra commodo ultrices. In eu facilisis leo, quis consectetur ex. Nam congue fringilla elit, ac mattis velit dictum ac. Donec tincidunt placerat ligula fermentum vulputate. Sed malesuada orci sit amet enim euismod, et euismod nunc pretium. Ut molestie et sem eu consectetur. Praesent fringilla elit enim, a convallis nulla sodales id. Sed tristique cursus libero. Cras ac magna id nisl pulvinar iaculis eu sit amet velit.
</div>
</div>
<div id="slant2" class="slant">
<div>
<img src="http://lorempixel.com/500/200/people" alt="Random Picture" />
</div>
</div>
<div id="slant3" class="slant">
<div>
Vivamus interdum facilisis justo ut fermentum. Cras turpis diam, efficitur sit amet mi sit amet, dapibus fermentum odio. Aenean fermentum tincidunt placerat. Vivamus dictum, diam quis elementum laoreet, lacus ex consectetur neque, eget fringilla ipsum neque nec sem. Ut eget venenatis urna, quis feugiat orci. Pellentesque vel interdum ante. Nulla blandit ex quam, non sollicitudin lectus laoreet nec. Integer vitae finibus elit. Duis pellentesque turpis odio, sit amet convallis libero blandit et. Maecenas accumsan est eros, vel scelerisque nulla scelerisque sit amet.
</div>
</div>
<div id="slant4" class="slant">
<div>
Duis non placerat nisi, in maximus tellus. Nullam in interdum nunc, sed tempus nunc. Suspendisse lorem nisi, blandit vel odio ac, varius rhoncus sem. Phasellus quis placerat enim, id iaculis eros. Nunc at egestas nisi. Nulla in dui mattis, lacinia lectus ac, commodo ligula. Fusce fringilla vitae magna sit amet dignissim. Fusce quis elit elementum, faucibus eros id, facilisis mi. In vitae accumsan tellus. Quisque venenatis lacus urna, volutpat luctus eros feugiat id. Duis pretium pulvinar molestie. Nulla eget rhoncus sapien.
</div>
</div>
</div> <!--closes columnwrapper-->
One advantage of SVG is that it is supported by most browsers (with the previous transform solution, you may find some issues with IE that will need tweaking).
Related
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.
This question already has answers here:
Make wrapper take maximum width of child image? [duplicate]
(2 answers)
Closed 4 years ago.
I have a DIV-wrapper (centered) that contain a picture and a paragraph:
What I want to do is to make the width of the wrapper flexible, so that it can fit the width of the picture. I have achieved this with display:table; (I also tried inline-block, and also width:fit-content; [the last of which oddly enough didn't work]).
The text also fits perfectly in there, but...! As soon as the text becomes longer than the width of the picture, the wrapper expands to fit the text rather than fitting the picture (and breaking the text).
Is there any solution to this problem?
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<div class="image_wrapper">
<img src="pic.jpg">
<br>
<p>Some text</p>
</div>
.wrapper {
border: 1px solid red;
display: table;
width: 1%;
margin: 0 auto;
}
.caption {
text-align: center;
}
<div class="wrapper">
<img src="http://via.placeholder.com/200/300">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
You can take the approach without jQuery using the figure/figcaption combination BUT, this only works if you have one figure/figcaption element on the page.
Set the height of the figure to be 100% and set the width of the fig caption to be the width of your image. This will contain all your text in the figure element and allow the height to expand to the length of your text.
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
width: 100px;
}
<figure>
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
I would suggest using some jQuery to take care of calculating the width as well as the case of multiple div's with images of different sizes.
$(document).ready(function() {
$(".image_wrapper img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".image_wrapper > p").css("width", width);
})
});
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrapper">
<img src="http://via.placeholder.com/100x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
<div class="image_wrapper">
<img src="http://via.placeholder.com/150x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
Also, you don't need to write custom div's with classes if you use the figure/figcaption combintation.
$(document).ready(function() {
$(".myFigure img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".myFigure > .myCaption").css("width", width);
})
});
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
/*width: 100px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="myFigure">
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
<figure class="myFigure">
<img src="http://via.placeholder.com/150x150">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
Is it possible to create a responsive arrow like in the image that adapts to the height (aka the left columns second paragraph is deleted) with css only?
I tried with borders, rotated and skewed padding and box shadows. But wasn't able to achieve the layout as seen in the image.
My problem is the variable height of the "element".
This is the html code implemented:
<div class="container">
<div class="row">
<article class="col-container">
<div class="col-md-6 col-xs-6 col-left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
<p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
vulputate efficitur augue, eu mattis metus porttitor pharetra.
</p>
</div>
<div class="col-md-6 col-xs-6 col-right">
<p>
In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
augue, a pellentesque erat neque eu purus.
</p>
</div>
</article>
</div>
</div>
And this the css:
.col-container {
overflow: hidden;
position: relative;
}
.col-left,
.col-right {
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.col-left {
background-color: #fff;
}
.col-right {
background-color: #019CDC;
}
I made a jsfiddle to play around here: https://jsfiddle.net/ae6L4or5/
clip-path Solution
This is achievable with the CSS property clip-path.
This is still fairly unsupported and as such should be used more as a future recommendation
.col-container {
overflow: auto;
box-sizing: border-box;
background: skyblue;
}
.col-container .col-left {
background: white;
-webkit-clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
width: 60%;
float: left;
padding: 12px;
padding-right: 12%;
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<article class="col-container">
<div class="col-md-8 col-xs-8 col-left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
<p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
vulputate efficitur augue, eu mattis metus porttitor pharetra.
</p>
</div>
<div class="col-md-4 col-xs-4 col-right">
<p>
In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
augue, a pellentesque erat neque eu purus.
</p>
</div>
</article>
</div>
</div>
clip-path maker - Clippy
CanIUse Support
MDN Documentation
SVG Solution:
You can achieve this using SVG:
MARKUP:
First lets create our SVG shape using the <path> tag. It is important to add the attribute fill with a value of currentColor which will be explained below in a few more steps.
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
More info: <path> tag here.
After creating our "triangle" shape, we will wrap it in a <symbol> tag with an id for us to be able to use it multiple times just like SVG Icons, with a spritesheet and using the <use> tag.
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
The <use> element lets you reuse existing elements, giving you a
similar functionality to the copy-paste functionality in a graphics
editor.
More info: here.
Okay, so now we got our SVG ready for use (pun inteded). Lets wrap it in a <svg> tag and add a class to it to style it later.
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
Next, wrap the above <svg> tag with another element for us to position it like we want.
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
STYLING:
Remember the value currentColor we defined in our <path> attribute fillin the beginning?
It's time to use it, currentColor variable will follow the cascade and get the value from our color property defined in the following class:
.separator__triangle {
width: 100px; /* You can change the width if you want it to be bigger or smaller*/
height: 100% /* Used to fill the whole container */;
color: white; /* This is the color of the triangle shape */
}
Positioning our container and hiding our spritesheet (this is needed to prevent it from rendering an empty space):
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none; /* We don't want it to have any pointer events do we?*/
position: absolute; /* Positioning */
top: 0;
left: 0;
height: 100%; /* Cover whole height of the container*/
}
Finally, we are ready to go!
CODE SNIPPET:
.container {
display: flex;
}
.col {
padding: 3em;
}
.col--left {
background-color: #fff;
}
.col--right {
background-color: #019CDC;
}
.col--with-separator {
position: relative;
}
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.separator__triangle {
width: 100px;
height: 100%;
color: white;
}
<main>
<article class="container">
<section class="col col--left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
<p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam vulputate,
ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent vulputate
efficitur augue, eu mattis metus porttitor pharetra.
</p>
</section>
<section class="col col--right col--with-separator">
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
</section>
</article>
</main>
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
Remember that whenever you want to use the arrow, you will just need to add the following to your container:
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
Note: Your container must have position: relative; as one of its CSS properties, because our arrow is positioned using the absolute value.
PLAYGROUND:
Lets add a modifier to invert the arrow and use it on the left column!
.container {
display: flex;
}
.col {
padding: 3em;
}
.col--left {
background-color: #fff;
}
.col--right {
background-color: #019CDC;
}
.col--with-separator {
position: relative;
}
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.separator__triangle {
width: 100px;
height: 100%;
color: white;
}
.separator__container--inverted {
left: calc(100% - 100px);
}
.separator__container--inverted .separator__triangle {
color: #019CDC;
transform: rotateZ(180deg);
}
<main>
<article class="container">
<section class="col col--left col--with-separator">
<div class="separator__container separator__container--inverted">
<svg class="separator__triangle separator__triangle--inverted">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
<p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam vulputate,
ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent vulputate
efficitur augue, eu mattis metus porttitor pharetra.
</p>
</section>
<section class="col col--right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
</section>
</article>
</main>
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
JSFIDDLE
This is an alternative to Stewartside solution, lacking browser support at the moment.
EDIT:
Adressing the problem you have with equal height columns, Flexbox is used in the demo, which further explanation is not included in the scope of this answer.
However, here's another post where you can find useful resources on flexbox in the more info section.
You can use :before and :after pseudo elements and a little bit CSS3 transformation to achieve this.
Note: This technique is depends on content of the largest column. You can change width of pseudo elements and a bit rotation to make it fit for your needs.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.col-container {
overflow: hidden;
position: relative;
background: #fff;
}
.col-left,
.col-right {
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.col-left {
z-index: 10;
}
.col-right {
background-color: #019CDC;
padding-left: 50px;
}
.col-container:before,
.col-container:after {
transform: rotate(3deg);
transform-origin: 0 0;
position: absolute;
margin-left: -15px;
background: #fff;
margin-top: -3px;
height: 9999px;
content: '';
width: 50px;
z-index: 1;
bottom: 0;
left: 50%;
top: 50%;
}
.col-container:before {
transform-origin: 0 100%;
transform: rotate(-3deg);
margin-bottom: -3px;
bottom: 50%;
top: auto;
}
<div class="container">
<div class="row">
<article class="col-container">
<div class="col-md-6 col-xs-6 col-left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
<p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
vulputate efficitur augue, eu mattis metus porttitor pharetra.
</p>
</div>
<div class="col-md-6 col-xs-6 col-right">
<p>
In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
augue, a pellentesque erat neque eu purus.
</p>
</div>
</article>
</div>
</div>
I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+
Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>
Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>
Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)
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.