I'd like to use image captions and since the figure tag is not supported in IE8 or below, I thought a <div> containing <img> and a caption would help out.
However, when my caption is wider than my <img>, the containing <div> width expands to the caption width. This causes ugly whitespace next to the <img>. Instead I'd like the caption to break over lines.
I could manually set the <div> width equal to the <img> width. Or manually insert a <br /> in the caption where needed. But I was hoping there would be a more elegant solution.
For an example, please see this jsfiddle
Working Fiddle: http://jsfiddle.net/uNDRx/3/
CSS:
div.rimg {
display:table;
width:1px;
float:right;
border:1px solid #aaa;
border-radius:5px;
overflow:hidden;
margin:10px;
}
div.rimg img {
}
div.rimg span {
margin:10px;
}
HTML:
<body>
<h2>Pellentesque habitant morbi tristique senectus et netus</h2>
<div class="wrapper">
<div class='rimg'>
<img src='https://dl.dropboxusercontent.com/u/116120595/tree_1_200_200.jpg' alt=''><span>What an exceptionally beautiful tree</span>
</div>et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>
</div>
</body>
Related
i am getting an issue when design email template in the SendGrid.
I used css inline, i want to subText max 3 line.enter image description here
Look good in the design, but when received email, 3 properties -webkit auto removed enter image description here
it only keep be 2 properties.
help me, thank you
I tested the following on Litmus:
<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
This worked only on Apple Mail, iPhones, and Samsung mail (Android).
You can use overflow:hidden with a max-height, and that will work with everything except MS Outlook Desktop (Windows). There is no fix for that, since it doesn't support overflow or max-height or anything (it supports a bit less than HTML4).
<div style="max-height:60px;overflow:hidden;width:300px;line-height:20px;">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
What I've done here is calculated what the height of 3 lines would be (line-height of 20px * 3 = 60px), and used that as the height of a wrapping div.
Max-height is needed for Gmail iOS, which changes height:60px into height:auto.
I wrote this sample code:
<div style="display:flex;flex-direction:row;width:100%">
<fieldset style="white-space: nowrap; width:100%; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis est id posuere pellentesque. Donec sem lacus, consequat id consectetur a, semper in felis. Suspendisse potenti. Nam eu dapibus ex, nec convallis diam. Donec mollis sit amet nunc quis malesuada. Vestibulum semper cursus magna at commodo. Etiam tincidunt enim vel urna tempor dapibus. Praesent posuere nunc lorem, non dignissim ex semper sed. In hac habitasse platea dictumst.</p>
<p>Fusce molestie sapien a erat laoreet maximus. Phasellus id commodo dolor, pellentesque aliquet lacus. Nunc viverra nec mi nec volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius tellus ante, non tincidunt arcu venenatis ac. Praesent non diam varius, tempus magna sed, bibendum dui. Curabitur lobortis leo tellus, a imperdiet est sodales a.</p>
<p>Suspendisse elit leo, feugiat in tortor eu, maximus mollis urna. Fusce gravida auctor sapien, ac lacinia diam. In quis nisl diam. Cras blandit elementum ornare. Nunc quam tortor, semper vitae lacinia quis, pulvinar at arcu. Praesent suscipit, urna vitae viverra tempor, eros nisl mollis enim, at lobortis sapien mi et purus. Donec at pretium purus. Praesent auctor turpis vitae massa semper elementum. Fusce tempus turpis sit amet aliquam rhoncus. Donec ligula mauris, accumsan eget consequat viverra, ultrices ac ipsum. Ut maximus convallis magna, id mattis tortor ornare non.</p>
<p>Suspendisse lacinia mi vel malesuada pretium. Vivamus sagittis vulputate tempus. Mauris feugiat enim et nisl volutpat sollicitudin. Sed eu leo lectus. Donec tempus consequat risus, pharetra tempus urna pharetra non. Aenean vulputate efficitur nisi, non egestas dui faucibus quis. Praesent semper eget neque sed vulputate. Nullam molestie tellus eu malesuada dignissim. Nullam tempus sed elit nec ullamcorper.</p>
<p>Pellentesque urna lorem, cursus quis tortor sit amet, elementum efficitur elit. Morbi blandit faucibus elit vitae finibus. Morbi neque mi, tincidunt non felis eget, mattis ullamcorper mi. Suspendisse potenti. Maecenas nec metus eu erat scelerisque interdum. Vivamus sit amet interdum dolor, sit amet pellentesque mauris. Morbi vehicula purus ac aliquet dictum. Curabitur lacinia purus id leo commodo pellentesque.</p>
</fieldset>
</div>
The fieldset width overflow the screen on chrome, but working fine on IE and Firefox.
check this on different browsers: http://jsfiddle.net/hideyatsu/wpe03rs6/
On Chrome the <fieldset> is given a min-width equal to the width of the content. You can remove this by putting in min-width: 0px; in the <fieldset> style.
http://jsfiddle.net/wpe03rs6/2/
You can put chrome hack css something like this:
#media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
may be this will help you.
Try like this: Demo
body {
overflow-x:hidden;
}
HTML:
<div style="white-space: nowrap; width:100%; overflow:auto;display:block">
<fieldset>... </fieldset></div>
Updated demo
I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I want to indent the text below the image.
This is my original text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.
Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.
and i want to indent the first line of each paragraph
by the way there's an image above the paragraph.
this is my code
<div class="caption"><img src="/html/images/sample-image.png" alt="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices. Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.<br><br>
how can i solve this in css code?
can anyone solve my problem? Thanks in advance.
wrap both texts in <p> tags
<div class="caption">
<img src="/html/images/sample-image.png" alt="">
<p>Lorem ipsum</p>
<p>Maecenas eu neque </p>
</div>
It would be easier for you to apply css on them in future
Here is the working Pen for you.
You need to write css for paragraph. For complete code take a look at Pen Link Please
p .paragraph{
word-wrap: break-word;
}
Did it solve your problem ?
I would assume you want something simple like this?
That question wasn't very descriptive. Nonetheless, I have made a complete example. Just run the snippet.
Mainly, the important part was this:
.indent {
text-indent: 2em;
}
But I included extra styling to make the answer more complete.
.caption-wrap {
width: 400px;
border: solid 2px #000;
padding: 20px;
}
.caption-wrap p {
margin: 0;
margin-top: 10px;
}
.captioned-image {
display: block;
width: 300px;
margin: 0 auto;
border: solid 2px #000;
}
.indent {
text-indent: 2em;
}
<div class="caption-wrap">
<img class="captioned-image" src="https://static.pexels.com/photos/20974/pexels-photo.jpg" alt="Captioned Image">
<p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit vehicula diam vitae dictum. Nunc ut justo eu tellus scelerisque feugiat id non justo. Ut eu ex id orci congue euismod. In efficitur nisi sed ante molestie, malesuada tristique ex accumsan. Suspendisse non tempus sem, ut eleifend est. Cras bibendum mi non odio lacinia volutpat. Integer interdum nisi quis porta posuere. Nulla mollis, felis a auctor consectetur, leo orci venenatis magna, in eleifend quam lacus ac felis. Sed sodales neque a euismod pulvinar. Suspendisse non diam elementum arcu feugiat venenatis. Nulla pulvinar, est ut eleifend hendrerit, tortor ipsum mattis eros, non feugiat diam lacus accumsan metus. Suspendisse sollicitudin metus ac luctus consequat. Nulla eget elit tincidunt, finibus ipsum nec, congue dui. Curabitur ac scelerisque magna. Duis sagittis varius sapien ut porta. Quisque rhoncus dapibus ultrices.</p>
<p class="indent">Maecenas eu neque fermentum, sagittis ligula nec, dignissim nisi. Maecenas et lectus lobortis quam blandit porta. Praesent vel gravida ante. Phasellus eu elit vitae nisi vulputate condimentum vel sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque non est sed magna ornare tristique. Etiam aliquam sapien eu tellus laoreet luctus. Aliquam viverra lectus quis metus mattis euismod. Aenean faucibus ultrices nibh. Fusce vestibulum mauris in pretium ultrices.</p>
</div>
Why don't you use the tab special character at the start of each line
add image style like below and wrap each paragraph inside <p> tag
<style>
.caption img{display:block}
</style>
<p>first paragraph</p>
<p>second paragraph</p>
...
I'm trying out something here with floating the boxes in a container. The problem I'm having is that if the content gets too big in one of the containers the sub-container below it does not position itself right below it,instead it floats left from the edge of the top container. Hope I'm making some sense. I'm posting the code below, this might give a u better idea. And I'm also attaching the image for what I'm trying to achieve. If the question is not clear please let me know.
Thank You
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>containers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#container{width:700px;margin-left:auto;margin-right:auto;overflow:hidden;background:red;}
.subContainer{width:340px;background:blue;float:left;}
.subContainer:nth-child(even){background:green;float:right;}
</style>
</head>
<body>
<div id="container">
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla.
Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc
quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat
sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus
urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique
tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo.
Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper
sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
tortor vel metus elementum euismod.
</p>
</div>
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum
fringilla. Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet
ante felis. Nunc quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu
placerat vitae, placerat sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam
erat volutpat. Vestibulum rhoncus urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem.
Nullam ac scelerisque neque. Donec tristique tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus,
blandit non hendrerit eu, vestibulum vel justo. Curabitur et massa sapien.
</p>
</div>
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla.
Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc
quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat
sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus
urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique
tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo.
Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper
sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
tortor vel metus elementum euismod.
</p>
</div>
</div>
</body>
</html>
Something like this?
http://jsfiddle.net/ZS4RT/7/
Things may be different if you want to have more floating elements, though.
It move to the right because of float:right property in CSS. Add clear property to CSS so it cannot wrap around container above it.