Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
How to write a paragraph in HTML only on its left side? The desired output is similar to this:
Left paragraph
How to pull it off? Thanks!
Add on the < p > tag the style="text-align: left" CSS parameter, like this:
<p style="text-align: left"> Text here </p>
This goes for p, span, divs and etc. You can also make it by adding at CSS or the style.css document the p {text-align: left}. If you want all of your page text to be align to the left, you can just add to text-align CSS to the body, like this:
<style>
body { text-align: left }
</style>
This is pretty basic CSS, you can check it more at the W3Schools: https://www.w3schools.com/css/css_text_align.asp
To get the desired result, this is the HTML code...:-)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Know Posporo</h1>
<p style="text-align:left;width: 50%">Lorem ipsum dolor sit amet. Ut itaque porro aut aliquid voluptas est fugit consequatur. At dolores voluptas ut reprehenderit nulla eum adipisci fuga ut similique assumenda cum ipsum enim. Eum enim assumenda non aspernatur numquam et voluptatem sunt sed dignissimos enim et cupiditate perferendis. Cum rerum assumenda ut maxime quos et distinctio quis et dolor suscipit.
<br>
<br>
Sed enim numquam aut voluptate tempore sed magnam nisi rem nulla incidunt non iste iste et consequatur dignissimos? Rem placeat ratione aut rerum Quis quo velit laborum qui laudantium aliquid sed quas natus At quia illum ea dolor adipisci. Qui voluptatem nostrum sit galisum enim in dicta rerum non debitis quos aut quisquam doloremque.
<br>
<br>
Aut laudantium asperiores est provident nulla eum porro consequatur id quos voluptatem sit beatae quidem est eius distinctio. At voluptas quaerat aut inventore internos id quae quas eos praesentium veniam qui omnis veniam et similique voluptatem qui molestiae autem. Qui voluptatem delectus sit nisi magnam qui quia soluta non dicta quis sed Quis iusto sit consequatur veritatis. Qui numquam atque qui fuga magni sit maxime necessitatibus id nostrum quia?</p>
</body>
</html>
Related
After spending a lot of time I finally managed to do this:
window.onload = () => {
const fimg = document.querySelector('#first img')
const fimgWidth = fimg.getBoundingClientRect().width
const simg = document.querySelector('#second img')
const simgWidth = simg.getBoundingClientRect().width
fimg.style.left = `${fimgWidth/2}px`
simg.style.right = `${simgWidth/2}px`
}
div {
display: flex;
}
p {
flex: none;
width: 50%;
}
img {
shape-outside: url("https://openclipart.org/download/318603/hand-written-circle-04.svg");
position: relative;
}
#first img {
float: right;
}
#second img {
float: left;
}
<div>
<p id="first">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
<p id="second">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</span>
</p>
</div>
I think my intent is clear: I have two paragraphs of text stacked horizontally, I place an image between them, I want them to wrap around this image nicely.
Even though the above solution does what I want I still have strong doubts if it is the right solution:
Isn't getting the width of the image via Javascript a sign that I must've missed some obvious CSS way of doing this?
I want to place here a randomly chosen image out of a pool of available images, so I don't want to hardcode the image's width
I had to resort to superimposing two copies of this image on top of each other. Do I really need to have two images where I want just one?
This didn't happen here or at least, if it happened, it is not evident because the image I chose to show the problem is so simplistic that it doesn't matter. But isn't stacking the images on top of each other plus the computations I'm doing here a recipe for images being stacked on each other incorrectly (one image being moved by a pixel in either direction relative to the other image) due to rounding errors and sub-pixel problems?
Is there a more right-handed way of doing this?
CSS Exclusions would help here: it allows you to wrap text around any element. Unfortunately, this spec is still a working draft, and no browsers support it yet.
Can someone please explain why the second & third divs in the following snippet appear to blend with the image? For clarity, the question here is about why the opacity of the content element seems to affect layer order.
The image is an animated gif with no transparency. In the upper div everything seems to behave as expected. The image swirls around with it's white background blocking the text content of the div below it.
In the lower two divs I've decreased opacity and somehow this creates the effect of the text being superimposed over the image. This is further illustrated in the third div where I've set a background color on the wrapper. The whole thing is just confusing and unexpected for me.
div.wrapper {
position: relative;
padding: 15px;
border: 1px solid #ddd;
}
img.loader {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
}
div.content-b,
div.content-c {
opacity: .5;
}
div.wrapper-c {
background-color: #bbb;
}
<div class="wrapper">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper wrapper-c">
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
<div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
The stacking along the z-axis rules say that:
The order of sibling - based on which comes is first taken into consideration
A positioned sibling element is stacked over the static element - so the img should be over the div ideally.
Other properties like position which affects stacking context includes opacity, transform.
See these excerpts from MDN: stacking context
A stacking context is formed, anywhere in the document, by any element
which is either
the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
a flex item with a z-index value other than "auto",that is the parent element display: flex|inline-flex,
elements with an opacity value less than 1. (See the specification for opacity),
elements with a transform value other than "none",
elements with a mix-blend-mode value other than "normal",
elements with a filter value other than "none",
elements with a perspective value other than "none",
elements with isolation set to "isolate",
position: fixed
specifying any attribute above in will-change even if you don't specify values for these attributes directly (See this post)
elements with -webkit-overflow-scrolling set to "touch"
You can fix it by putting the img below the div - see demo below:
div.wrapper {
position: relative;
padding: 15px;
border: 1px solid #ddd;
}
img.loader {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
}
div.content-b,
div.content-c {
opacity: .5;
}
div.wrapper-c {
background-color: #bbb;
}
<div class="wrapper">
<div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper">
<div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper wrapper-c">
<div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
You should give higher z-index to img then it sit above all.
z-index: 9999;
If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
I am relatively novice when it comes to Bootstrap. I want content to be stretched full width under the right content block. I have attached a screencast which should help show what I am trying to do. I have tried using offset on the right block, but it doesn't do what I want. Is there a way that Bootstrap handles this, or is this something that has to be custom written?
http://screencast.com/t/ZxJGOBEy
Here is my code (which isn't much):
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<div class="col-md-4">
<img src="http://dummyimage.com/200" />
<img src="http://dummyimage.com/200" />
</div>
</div>
</div>
So, what you have now is two side-by-side columns. The text from .col-md-8 can never overlap into the other column because they're each their own individual boxes, their own domains. To get the effect you're looking for, you need to introduce the div wrapping around your images into the div wrapping around the text and add .pull-right to it (this is one of Bootstrap's helper classes and forces the div to float to the right), e.g. :
<div class="col-md-4 pull-right">
<img src="http://dummyimage.com/200" />
<img src="http://dummyimage.com/200" />
</div>
You can see the result here: http://codepen.io/angeliquejw/pen/zqwpgg?editors=1000
Please consider following snippet of HTML and CSS
p{
background-color: chartreuse;
text-align: justify;
}
img{
float: right;
background-color: transparent;
margin: 0 0 0 10px;
}
<!--note this image has transparent background -->
<img src="http://i.imgur.com/Qvcvk8i.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur autem reiciendis similique sapiente tempore nulla illo atque, eius cum. Nemo, blanditiis quasi. Ea reprehenderit magni officia, eligendi sint, rerum ex error in? Voluptas maiores, iure quo, tempore ipsa suscipit qui, reiciendis ea veritatis quis maxime, tempora dolor. Voluptatibus accusantium, deserunt vero perferendis reiciendis aperiam natus dicta officiis cupiditate voluptatum veniam non quisquam illo aspernatur enim dolor doloribus maxime nostrum accusamus mollitia incidunt in sit. Accusamus eligendi corporis libero, qui deleniti quisquam laudantium ipsam nostrum minus, cupiditate aut ratione, voluptatibus delectus ea error recusandae! Officiis maxime delectus ad enim quasi deserunt reiciendis autem non veniam. Doloremque non commodi deleceiustus ab, perspiciatis labore! At porro illo suscipit, nesciunt nobis. Quasi non ratione, dolorum hic, soluta saepe vel pariatur modi blanditiis harum omnis! Voluptatibus non, expedita atque! Quod sapiente aliquam distinctio eius? Neque magnam temporibus dolore et officia atque hic, facilis. Ut alias numquam ab, odio voluptates vitae molestias possimus recusandae eos incidunt voluptatibus earum excepturi hic explicabo, nulla sequi aperiam impedit quos nam sit commodi nesciunt atque dolore quam. Doloremque optio suscipit cumque, ducimus similique repellendus molestiae, deserunt autem quis quo sed minus, iure voluptatem molestias, vel quod qui vitae ut voluptatum!</p>
(please open this snippet in Full Page)
as you can see that paragraph is streching below image, background colour of paragraph proves it. So my question is why not the text?
The whole point of floating is for text to wrap around the floating element. If the text didn't wrap, and instead flowed over the floating element as though it were not there, then the concept of floating would be meaningless.
The background flows under the floating element because it is not text; it is layout. A floating element has no effect on its surrounding layout; its only purpose is for text, and other floats, to wrap around it. (People have been abusing floats for pseudo-layouts for well over a decade, but that's a separate issue.)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I think what I am going to ask here is really a big challenge! I could not even guess a way where to start to make some experiments...
Basically what I want to do is a very simple thing that is possible to do in all the applications like MS Word, OOo Writer, InDesign, etc: I need 3 empty text areas (div) connected to each other so that the exceeding text of the first div will go to fill the second div and so on to the 3rd div.
Here a graphic example of what I mean:
As you see, the text start in the DIV#1, but is longer than what the DIV#1 can handle, so it goes automatically at the beginning of the DIV#2, and so on.
The main problem is that I don't know how long is the text, so is possible that I have a few words or a full page, and the text need to be formatted this way because actually the text in the div is not like an article but a lot of small rows of data.
The second main problem is that the page has to be printed so it has to be only in one single page, and is just a small part of a big form. I can't make a very tall single column or it will print a second page.
Is there any way to make that possible with HTML/CSS?
EDIT: This is the code that I have since now, what I ask is if there is a way in CSS to make the exceeding text in the first div to go in the second and third div, like the graphic example above.
<style type="text/css">
.text-area {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFC;
text-align: left;
margin: 20px;
padding: 5px;
float: left;
height: 300px;
width: 180px;
border: 1px solid #609;
overflow: auto;
font-size: 12px;
}
</style>
<div class="text-area" id="t1">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div class="text-area" id="t2"></div>
<div class="text-area" id="t3"></div>
I understand that with CSS3 is possible but not yet widely used so it will not be good to use it for usability reason.
What it would appear you are asking for is not yet available in most browsers and is referred to as CSS Regions
An alternative which is slightly better supported is CSS Columns
Transfer overflow from one div to another
Continuing overflowed text in a different div?
Wish I could of just put this in a comment, but here are two people after the same thing and a few solutions for this, all JS based.
You could try Multiple Columns (css) but browser support is limited:
http://css-tricks.com/snippets/css/multiple-columns/
JavaScript options can be found here:
http://alistapart.com/article/css3multicolumn