I've been working on designs with very irregularly-shaped divs, such as rhombuses, trapezoids, etc. I want to know what the most responsive way to deal with these types of designs.
My current workaround:
The typical way I implement these designs is by using a combination of clip-path, bloated vertical padding to deal with the clip-path clipping content, and then a negative margin-top on the next fold to cover the white-space created by the clip-path. I declare negative margin-top values with viewport width (ex. -10vw), so the folds adjust based on the width of the browser.
Problems with current workaround:
Negative margins usually cause folds to overlap each other, covering the content of other folds. Multiple #media queries needed for it to look acceptable and yet I still encounter certain sizes where the folds overlap each other.
Here's an image to further describe what I mean by irregularly-shaped divs/folds:
https://imgur.com/a/jCbJZS4
Any help would be appreciated. These sort of designs seem to be trending, so your help will serve me and others for future projects as well. Thank you!
SVGs are a nice way to create section dividers as per your image,(and other complex shapes!) you can target the various shapes inside an svg with css (change fill colour, animations etc), they are widely supported (except for old IE browsers, naturally) and as they are simply vector paths, you can easily stretch, scale and distort, and they're quite small in size.
You might set an svg divider e.g. a wave pattern inside an absolutely positioned div at the bottom of a content section, like below.
section {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#sect1 {
background-color: #2baf70;
}
#sect2 {
background-color: #f9f9f9;
}
.row {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 45px 45px 115px 45px;
}
.divider {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmOWY5ZjkiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
/* this is an inlined svg taken from a project I'm working on, as an example. as I can't really import a .svg file here */
width: 100%;
background-size: 100% 70px;
bottom: 0;
height: 70px;
z-index: 1;
display: block;
background-repeat-y: no-repeat;
position: absolute;
}
<section id="sect1">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
<div class="divider"></div>
</section>
<section id="sect2">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
</section>
I am creating a page for comments, which containers users' comments and a comment input, the comment input is fixed at the bottom.
The problem is it works fine on Desktop, but when I try on my iPad iOS 11 the comment input box scrolls with the page, not fixed at the bottom.
Here is my code: JSFiddle
CSS
.xi-ipad-scroll {
height:500px;
overflow:hidden;
background:green;
}
.xi-comment {
width: 40%;
bottom: 0;
position: fixed;
}
.xi-comment-box {
width: 100%;
font-size: 15pt;
font-weight: 700;
}
.xi-comment-send {
bottom: 15px;
position: fixed;
}
HTML
<div class="xi-ipad-scroll">
<div class="xi-main-title">Bình luận</div>
<div class="xi-comment-list">
<ul>
<li>
<div>Quang Anh Nguyễn</div>
<div>Lorem ipsum dolor sit amet, illum prompta sadipscing cu sit. Ea mei lorem erroribus honestatis, laoreet torquatos eu mel, nam dicant labitur tractatos et. Cu est alia altera consulatu, vim falli detracto reformidans in, novum forensibus eu sit. At etiam erroribus prodesset qui, eam veniam laoreet at. Ea mei natum erant.</div>
</li>
<li>....</li>
</ul>
</div>
<div class="xi-box xi-comment">
<textarea type="text" placeholder="Comment..." class="resizable xi-comment-box" rows="1"></textarea>
</div>
</div><!--iPad-->
I searched on internet and I got solutions like putting -webkit-backface-visibility: hidden; or z-index:100 but none of them works
If I'm understanding what you are trying to do correctly, your "position:fixed" is actually what is causing this. Fixed position will always show on the screen. More info on fixed position. If you want it to be at the bottom of all content you will need to remove the fixed from both -send and -comment.
.xi-comment {
width: 40%;
bottom: 0;
***position: fixed;***
}
.xi-comment-send {
bottom: 15px;
***position: fixed;***
}
This now leads to a new problem, you have set an absolute height and have hidden anything outside of that height. You either need to extend the height, remove the hidden, or move the comment section outside of that div.
I put together a codepen to show this. I think you actually are having the same issue on desktop, I just don't believe you had enough content for you to realize it.
I have two divs side by side. The div on the left side is a basic navigation. The div on the right is an article. I want the div on the left to be the height of the viewport and the div on the right to hide anything that longer than the div on the left (the end goal is to have a stick side bar that takes up 1/3 of the screen). I’ve considered using flexbox, but haven’t used it before and wasn’t sure if this is the best method to go.
I tried setting the height of the left div to 100vh as suggested in this article: Make div 100% height of browser window but it didn’t work. I’ve seen suggestions regarding using tables but would prefer avoiding them. I’ve seen some suggestions regarding using jquery and having the right div resize itself based on the left, but this seems a little more complex then necessary.
Note: Most articles I've seen about matching div heights seems geared toward making the smaller div match the height of the larger. My issues is the opposite. I want the larger div to match the height of the smaller one and hide any extra content.
However I’m open to any suggestions.
<doctype="HTML">
<html>
<head>
<title>Web Hosting Issues</title>
<style>#import url('https://fonts.googleapis.com/css?family=Open+Sans');
</style>
</head>
<body>
<header>
<div id="logo">
<a href="home">
<h1>Website</h1>
<img>
</a>
</div>
<navigation>
<ul>
<div class="nav-row">
<li id="site-down">
<a href="site-down-url">
<img>Site Down
</a>
</li>
<li id="wordpress">
<a href="wordpress-url">
<img>Wordpress
</a>
</li>
</div>
<div class="nav-row">
<li id="migrations">
<a href="migrations-url">
<img>Migrations
</a>
</li>
<li id="backups">
<a href="backups-url">
<img>Backups
</a>
</li>
</div>
<div class="nav-row">
<li id="databases">
<img>Databases
</a>
</li>
<li id="domains">
<a href="domains-url">
<img>Domain
</a>
</li>
</div>
</ul>
</navigation>
<div id="contact-us">
<a href="contact-form">
<img>
<div>
<h2>Have Us Fix It</h2>
<button id="contact-button">Contact Us</button>
</div>
</a>
</div>
</header>
<article>
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, mei hinc graeci vituperatoribus et. Pri stet copiosae mediocrem eu. Mollis inimicus mel id, mutat mentitum vix an. No pro virtute intellegam, ea has epicurei referrentur, posse oporteat ius ei.</p>
<p>Libris appellantur et pro. Insolens ocurreret salutatus et sit. Mei ea aeque ludus aliquando, at hinc ponderum comprehensam cum. Eu nam mandamus expetenda dissentiunt, probo tacimates at eos, no everti docendi sed. Id appetere democritum nam.</p>
<p>Odio animal aperiam ea sit. Debet accumsan ne pro, eos simul perfecto invenire ea. Per ea quaestio consulatu. Eos vide repudiare id, mei cu ridens possim assentior, te probo intellegat vim. Has etiam incorrupte an. Id oratio verear audire mei, reque tincidunt duo ex.</p>
<p>Eum erant putant vocent ei. At dico exerci quo. Pri melius ocurreret persequeris in, eu noster virtute est. Aeque commodo ut duo. In sit melius dignissim, te has lorem minimum consectetuer.</p>
<p>Pri oratio vocibus vituperatoribus te, dolores persecuti sit ut. Esse munere eam ea, possim mentitum moderatius nec at. Doming gubergren ut mei, luptatum salutatus scriptorem mei an. Nec partem ponderum assueverit cu, veri erat libris his ad, ad vidisse docendi ius. At everti dolores disputationi vel, nec cu diceret eleifend. Pri cu falli erant, tamquam democritum ad sit, vis illum inani in. Apeirian nominati sed at, ei atomorum accommodare usu, has modus definitionem te.</p>
</article>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
display: flex;
}
img {
max-width: 100%;
display: block;
margin: auto;
}
header {
float: left;
width: 50%;
}
header a {
text-decoration: none;
}
#logo, #contact-us {
background: #074f7b;
padding: 0.5em;
}
#logo h1 {
display: inline-block;
text-align: center;
font-family: sans-serif;
color: white;
float: left;
width: 68%;
}
#logo img {
float: left;
width: 30%;
padding-left: .4em;
color: white;
}
#logo::after{
content: " ";
display: block;
height: 0;
clear: both;
}
navigation {}
navigation:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
navigation ul {
margin: 0;
padding: 0;
}
.nav-row {}
.nav-row li {
width: 50%;
float: left;
display: inline-block;
min-height: 100px;
}
.nav-row a {
display: block;
padding: .5em;
text-align: center;
color: black;
}
.nav-row a:hover {
color: white;
}
#site-down {
background: #ffc219;
}
#wordpress {
background: #8f73b4;
}
#migrations {
background: #0778bb;
}
#backups {
background: #f06f26;
}
#databases {
background: #764821;
}
#domains {
background: #59bb53;
}
#contact-us h1, #contact-us img{
color: white;
}
#contact-us {
text-align: center;
}
#contact-us img {
float: left;
width: 45%;
text-align: center;
padding: 0 .5em
}
#contact-us div {
width: 50%;
float: left;
text-align: center;
}
#contact-us h2 {
color: white;
margin: 0em 0em .5em 0em;
padding-left: 0.625em
}
#contact-us::after{
content: " ";
display: block;
height: 0;
clear: both;
}
#contact-us button {
background: #8f73b4;
border-radius: .6em;
border: 1px solid #8f73b4;
color: white;
}
article {
float: right;
width: 50%;
}
article h1, article p {
margin: 1.563em;
}
article h1 {
text-align: center;
}
You could simply position:fixed; your left menu:
/*QuickReset*/*{box-sizing:border-box; margin:0;}html,body{height:100%;}
#menu{
position:fixed;
background: #8F73B4;
height:100%;
width: 33.333%;
}
#page{
margin-left:33.333%; /* matches the menu width */
height: 2000px; /* test: just to add scrollbars */
}
<div id="menu"> MENU BOXES HERE </div>
<div id="page"> PAGE CONTENT HERE </div>
Than for the menu elements/boxes I'd go with flexbox
JSBin demo
/*QuickReset*/
*{box-sizing:border-box;margin:0;}
html,body{height:100%;font:14px/1.4 sans-serif;}
.flex-col{
display: flex;
flex-flow: column wrap;
}
.flex-row{
display: flex;
flex-flow: row wrap;
}
.grow{
flex: 1;
}
img{
max-width:100%;
vertical-align:top;
}
#menu{
position:fixed;
background: #8F73B4;
height:100%;
width: 33.333%;
}
#page{
margin-left:33.333%; /* matches the menu width */
height: 2000px; /* test: just to add scrollbars */
}
<div id="menu" class="flex-col">
<header>header</header>
<div class="flex-row grow">
<div class="grow">1</div>
<div class="grow">2</div>
</div>
<div class="flex-row grow">
<div class="grow">3</div>
<div class="grow">4</div>
</div>
<footer>footer</footer>
</div>
<div id="page">
<h1>PAGE CONTENT HERE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At recusandae explicabo numquam molestiae, debitis eius deserunt cum necessitatibus aspernatur. Excepturi omnis, tenetur nihil voluptatibus hic incidunt doloribus itaque delectus dolorum!</p>
</div>
P.S: <navigation> is not a HTML5 element. You probably want to use <nav> for your semantic.
This question already has answers here:
w3c html validation error - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections
(3 answers)
Closed 6 years ago.
Warning: Article lacks heading. Consider using h2-h6 elements to add
identifying headings to all articles. From line 32, column 5; to line
32, column 46 ↩ ↩
The above warning is generated by https://validator.w3.org/.
Now let me show you the code of those line numbers.
<article class="form-control relativePos">
<ul class="formsectionTab">
<li class="active">1. Services</li>
<li>2. Time</li>
<li>3. Details</li>
<li>4. Payment</li>
<li>5. Done</li>
</ul>
Precisely the Line#32 that code is talking about is this →
<article class="form-control relativePos">
My HTML developer is saying there are only 2 ways to get rid of these warnings →
Either use <div></div> in place of section or article or use h2-h6 elements.
But my problem is I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required. what should I do?
Any alternative HTML5 attributes that can do this w/o enforcing the h2-h6 elements?
The answer is in your question. I will quote you: "I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required."
This is one of the biggest problems in the software industry. It's called Scope Creep.
Basically, if something is not within the scope of requirements, you should avoid dealing with it unless absolutely necessary. Sometimes it's hard to bite the bullet though I know.
Add h1 - h6 elements as much as you want
Wrap those h1 - h6 elements in divs styled the same as your other text
Add classes to the h1 - h6 elements to inherit the div style (which
should be the same as the rest of your text)
Effect?
h1 - h6 that look exactly like the rest of your text instead of looking like heading elements
body {
background: #111;
color: #999;
text-align: justify;
text-justify: inter-word;
max-width: 80%;
margin: 10%
}
.uniform {
display: inherit;
text-align: inherit;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.mycoolstyle {
color: red;
font-size: 22px;
font-weight: bold;
display: inline;
}
<body>
<div>
<h1>This is a Header 1 with browser defaults</h1>
<div class="mycoolstyle">
<h1 class="uniform">This is a Header 1 with inhertied div style</h1>
</div>
<h2>This is a Header 2 with browser defaults</h2>
<div class="mycoolstyle">
<h2 class="uniform">This is a Header 2 with inhertied div style</h2>
</div>
<h3>This is a Header 3 with browser defaults</h3>
<div class="mycoolstyle">
<h3 class="uniform">This is a Header 3 with inhertied div style</h3>
</div>
<p>This is a paragraph with browser defaults
<br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
aperiam forensibus an nam.</p>
<div class="mycoolstyle">
<p class="uniform">This is a paragraph with inhertied div style
<br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
aperiam forensibus an nam.</p>
</div>
</div>
</body>
I have a text container with paragraphs and headings. At the bottom of the page I want to float an image to the right of the page, while the text wraps around the image. The bottom of the image should be flush with the bottom of the last paragraph.
The page width is variable (responsive), but the image dimensions are fixed. Is it possible to accomplish this in HTML and CSS (CSS3 is fine)? If not, can it be done with a minimal amount of Javascript?
Here's a schematic example of what I want to accomplish:
The HTML currently looks something like this, but it can be changed if necessary. I don't particularly care where in the document the image is located. Using background images instead would be fine too.
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
When I set float: right on the image, it floats to the right but I cannot get it to align to the bottom of the page. Suggestions?
Edit: the closest I got is this... :-)
Create a spacer element with float: right and height equal to the height of the content minus the height of the image. Then use float: right and clear: right on the image:
<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>
.spacer {
height: calc(100% - 200px);
width: 0px;
float: right;
}
.bottomRight {
height: 200px;
float: right;
clear: right;
}
http://cssdesk.com/bLNWs
My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresize event.
function sizeSpacer(spacer) {
spacer.style.height = 0;
var container = spacer.parentNode;
var img = spacer.nextElementSibling || spacer.nextSibling;
var lastContentNode = container.children[container.children.length - 1];
var h = Math.max(0, container.clientHeight - img.clientHeight);
spacer.style.height = h + "px";
while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
spacer.style.height = --h + "px";
}
if (lastContentNode.getBoundingClientRect().bottom > img.getBoundingClientRect().bottom) {
spacer.style.height = ++h + "px";
}
}
This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.
jsfiddle.net/gilly3/xLr7eacp
Edit: I created a jQuery plugin version (github | jsFiddle demo) that supports floating bottom left or bottom right. It also supports specifying which element to align the bottom with.
By the way, I didn't bother trying to support IE7.
I think the future way how to tackle this problem will be with CSS Exclusions.
CSS Exclusions extend the notion of content wrapping previously
limited to floats. ... Elements layout their inline content in their content area and wrap around the exclusion areas in their associated wrapping context (--excerpts from the spec)
This msdn article also explains exclusions
...web authors can now wrap text so that it completely surrounds
elements, thereby avoiding the traditional limitations of floats.
Instead of limiting elements to floating either to the left or right
relative to their position in the document flow, CSS Exclusions can be
positioned at a specified distance from the top, bottom, left, or
right sides of a containing block, while remaining part of the
document flow.
Ironically, to date this only works in IE10 (look for wrap-flow:both here)
Check out this fiddle in IE10+
This is what the code looks like:
<div class="container">
<div class="exclusion">
Exclusion positioned at bottom right hand side of text.
</div>
<div class="dummy_text">
<p>text here</p>
</div>
</div>
CSS
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
right:0;
bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
width: 150px;
height: 100px;
background: url(http://placehold.it/150x100) no-repeat;
}
So as you can see - even though the exclusion is positioned absolutely - it still acts like a float - in this case: float bottom right.
Regarding browser support:
Check out this site which shows which properties are supported by the browsers (to date: only IE10+ supports wrap-flow:both )
PS: Latest updates concerning CSS exclusions (and other simlar modules like CSS regions and CSS Shapes) can be found at the Adobe Web Platform Team Blog
Possible CSS Solution: (only tested in chrome)
It looks like this might work using CSS3's flex box properties and a combination of background-image properties. I was able to get it pretty close using only CSS. (It works but needs a little tweaking) Also, this may not be ideal cause I did have to change the markup a little bit to make this work. But its probably worth a shot if you are looking for a pure CSS solution.
Here is a Demo -> http://jsfiddle.net/ADSH2/
New Markup: (not to much different)
<section >
<h2>Some Heading:</h2>
<p>...</p>
<p class="last">
<span class="image"></span>
</p>
</section>
CSS:
.last {
display:inline-flex;
flex-direction:row;
}
.image {
padding:5px 0 0 5px;
width:100%;
background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
background-size:100%;
background-repeat:no-repeat;
background-position:bottom right;
}
Resources:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://dev.w3.org/csswg/css-flexbox-1/
I have worked on a jQuery-based solution — probably not as elegant as the one posted by gilly3 though ;) and it's also slower and a bit bloated...
My trick is to append two <div>s to the section, which is floated to the left and hidden width a width of 0. One of the div, a designated ghost element that will have the same dimension as the image, will be positioned below another div that is the designated height spacer. The script uses a while loop to establish if the ghost element has reached the bottom of the parent section element. If this has not happened, it will increment the height of the height spacer by 1, until the condition is satisfied.
The markup I have used is as follow. I'm using the HTML5 attribute data-bottom-image to identify sections that you have the image to be floated to the bottom. Of course it is dispensable, depending on how you want to select for the correct section element.
<section id="c1" data-bottom-image>
<h2>...</h2>
<p>...</p>
<img src="http://placehold.it/250x100" />
</section>
And the jQuery script:
$(function () {
$("section > img:last-child").each(function () {
// Offset image based on the bottom and right padding of parent
var $par = $(this).parent();
$(this).css({
bottom: $par.css('padding-bottom'),
right: $par.css('padding-right')
});
});
// Function: adjust height of height-spacer, pixel by pixel
function adjustHeightSpacer($par, $hs, $is) {
// Stretch height spacer
$hs.height(0);
$hs.css({
height: $par.find("img").position().top - parseInt($par.css('padding-top'))
});
// Adjust height spacer
while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("+=1");
}
while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("-=1");
}
};
$("section[data-bottom-image]").each(function() {
// Append two spacers:
$(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')
var $hs = $(this).find(".height-spacer"),
$is = $(this).find(".image-spacer");
// Adjust image spacer dimension
$is.css({
height: $(this).find("img").height(),
width: $(this).find("img").width()
});
// Adjust height spacer
adjustHeightSpacer($(this), $hs, $is);
});
$(window).resize($.debounce(250,function() {
$("section[data-bottom-image]").each(function() {
// Adjust height spacer
adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
});
}));
});
And here is the working Fiddle: http://jsfiddle.net/teddyrised/xmkAP/5/
I guess it's solved. It works!
With a little bit of JavaScript and CSS I did it like this:
http://jsfiddle.net/stichoza/aSScx/
One simple floatify() function.
Responsive.
Window resizing won't break it.
Any image width/height.
Put as many text you want.
Idea inspired by: http://www.csstextwrap.com/
CSS only Solution.
Using media queries one can accomplish this layout.
HTML
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
<img src="..." class="show-medium">
...
<img src="..." class="show-small">
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
display: none;
float: right;
clear: right;
}
#media (max-width: Xpx), (max-height: Xpx) {
/* show img for small screens */
.show-small { display:block; }
}
#media (min-width: Xpx) and (max-width: Xpx) and (min-height:Xpx) and (max-height: Xpx) {
/* show img for medium screens */
.show-medium { display:block; }
}
#media (min-width: Xpx) and (min-height: Xpx) {
/* show img as body background for large screens */
body {
background: url("http://placehold.it/200x300") no-repeat fixed right bottom transparent;
}
}
It plays well at different screen resolutions. See demo.
One has to play/adjust the CSS media queries as well as the position of the images within the markup in order to make it work.
CSS media queries is supported in Firefox 3.5+, Opera 7+, Safari 3+, Chrome and IE9+. For older IE versions one can use this fix: http://code.google.com/p/css3-mediaqueries-js/
A responsive solution for 2020, inspired by #gilly3's solution, and until CSS Exclusions arrive.
Flexbox on containing element to avoid needing fixed-height container whilst still ensuring 100% height works
:before element instead of spacer div
Viewport unit instead of fixed value to size image (and 'spacer') proportionately
To max-width image on wider screens, introduce breakpoint with fixed width to both image and spacer
Subtract any vertical margin needed within calc()
.container {
display: flex;
}
img {
float: right;
clear: right;
margin: 20px 0 0 20px;
height: 30vw;
#media (min-width: 1200px) {
height: 400px;
}
}
.container-inner:before {
content: "";
float: right;
height: calc(100% - 30vw - 20px);
#media (min-width: 1200px) {
height: calc(100% - 400px - 20px);
}
}
<div class="container">
<div class="container-inner">
<img src="https://picsum.photos/200" />
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
</div>
</div>
A CSS only and responsive solution that works without complex code. Resize the browser and see the magic in play:
.wrapper {
display: flex;
border: 1px solid;
}
.box {
text-align: justify;
font-size: 20px;
}
.float {
float: right;
height: 100%;
margin-left: 15px;
display: flex;
align-items: flex-end;
shape-outside: inset(calc(100% - 100px) 0 0);
}
<div class="wrapper">
<div class="box">
<div class="float"><img src="https://picsum.photos/id/1/100/100"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>
More details: https://css-tricks.com/float-an-element-to-the-bottom-corner/
PS: I am the author of the above article
use this :
<section class="post">
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
<style>
.post img {float:right;margin-top:80%}
</style>
change 80% to get best result.
Good Luck.
Here's a lightweight solution with a bit of jQuery:
http://jsfiddle.net/isherwood/6BvC2/
<section class="flagpole">
<div class="pole"></div>
<img class="flag" src="..." />
<p>Paragraphs...</p>
</section>
.pole, .flag {
float: right;
clear: right;
}
.pole {
width: 0.1px
}
function setFlag() {
$('section.flagpole').each(function () {
var poleHeight = $(this).height() - $(this).find('.flag').height();
$(this).find('.pole').height(poleHeight);
});
}
setFlag();
$(window).on('resize', function () {
setFlag();
});
To dispel any concerns about plagiarism, this solution is based on another similar answer I provided a while back.
Not quite there yet - but you might get where I'm going. Maybe someone else will complete this (if possible).
div.wrapper {
width: 300px;
transform: rotate(-90deg);
writing-mode: vertical-lr;
}
p.text {
margin-top: 1em;
writing-mode: vertical-lr;
}
img {
float: right;
transform: rotate(90deg);
height: 100px;
width: 100px;
}
<div class="wrapper">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAAAXNSR0IArs4c6QAABCZJREFUeF7t3D9I80AUAPBXcFBwEQcRwcGl4KhLQTvXWQQHdRasWDroIEitxVVBRFCc/DO4ddRZhU5CwcWldCiVDiqFgkUEP9593HE5kjZNk/vTJouNudxd3u/eXYI2kWKx+AcAMDw8DENDQ/gx3CRH4Pv7GxqNBmk1Uq1W/wYHB6FWq5FfjI2NwcjIiOQu9WdzX19flrg3m83/IOPj4yQiYoEQJpiB4hTn9/d3KwhtPoSRC0FbcwQJYfwFcTvA24KEMN3BuIVwnSFidzptoLvLMfdsr3FynSEhjLvB4RXCc4aEMPYw3UL4BtLva4xfEL6D9BuM3xCBgfQ6TFAQgYP0GkzQENJATIeRBSEdxDQY2RDKQHSHUQWhHEQ3GNUQ2oCohtEFQjsQ2TC6QWgLEjSMrhDag/gNozuEMSDdwpgCYRxIpzCmQRgL0g7GVAjjQUSY399f8quBgQGj/43J818MaUBU/6QZEYIolnCamsIpSzKM24C7LSe5+22bM2bK8hpgr+e1jVxABbQH8SugftUTkAOrVluQoAIYVL1+QWkHIitgstrpFEobEFUBUtWuE5RyEF0Coks/lIHoEgBxpKrul3QQ1Rfsdk5X1U9pIKou0C2AUznZ/Q4cRPYFdQugGiYwEB0h8Juu6XQa1tbWYG5ujsX+9vYWVldXyf7NzQ2srKywY29vb7C8vAzFYhHW19chk8lAvV4nx52+HEvbOT8/Z/UcHBzA3t4e2RfrPD4+Zt9+9h1ERwgMAh+kp6cnBoLB2dragpOTExIs+jkajbJz4vE4LC4uEkz8jGCtrvPj4wM2Nzdhf38fsB5+o/2wqxPL+QaiKwQ/ImOxGJTLZTJSaYZgdjw+PgIdpblcDqampkjQeSwM7PPzM1xfX7OyWLfddeN5iHF6egqjo6MWkHZ1dg2iMwSNRKVSIR/xpQgYaB4EAXCj0wm/jwC4j2gYWH7/7OyM7NNj9/f3JIOOjo4gEolAPp+3wNG+tKoT2/AMYgKEuEDjVGIHQjMCy2OAS6USARIzQhz5FG9jY4PVOz09DZeXl7Czs8OaTyQSFlQ+y8Q6OwYxEYJGxm8QWt/DwwPwizZCIWoqlQJ8Q8bV1RV8fn6SjHl5ebFMe55BTIZoB+JlyqJrA2YUjng6dYlZiXErFApweHhIQH5+fhynQVdTVi9AtALhpygsJy7q/OJsN4XhXRlu8/PzbB0SUTALdnd3YXt7m9wE4JR2cXHB1iV+CuurV2vYTVleb3v529eFhQW2hszMzFhuj2m5iYkJAoYBx8V/dnaWPPtks1l2K21729tLGeFmUacLudsHQ5x2cMOg4kZvlzF7kskk3N3dweTkJDlOHwzxgZJ/+MNBsLS0BK+vr+ShE4/Rl/+wDAlfzyTyydkXE4C8nil8gZmc4LdqhX+B2T8GuESS5P5SHQAAAABJRU5ErkJggg==" />
<p class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>