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
Related
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>
I have a simple layout like this:
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
Of course there is a lot of content in the divs. But this is the basic layout.
The first div has much more content so is longer in heigth.
How do I get them to be equal.
I've been pouring over this for hours and I cannot fix.
I see .row-eq-height in many threads but I cannot get to work.
Is flexbox part of bootstrap 4? I am only on 3 because 4 is not approved for us.
You can assign the height of the first div to the second div using JavaScript.
<div class="row" id="d1">
<div class="col-xs-6" style="background-color:gold">
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="col-xs-6" style="background-color:red" id="d2">
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the ...
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$("document").ready(function() {
$("div#d2").height($("div#d1").height());
});
</script>
I'm attempting to achieve the following layout based on this PhD thesis:
But is there a pure CSS way to take HTML citations out of one column and placing them in line in the other column?
.Grid {
display: flex;
}
.Grid-cell {
border: 1px solid black;
}
.Grid-cell:nth-of-type(1) {
flex: 1 1 70%;
}
.Grid-cell:nth-of-type(2) {
flex: 1 1 30%;
padding-left: 20px;
}
q {
/* Insert here */
}
<div class="Grid">
<div class="Grid-cell">
<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 <q cite="http://www.mashable.com/">nesciunt</q>. 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="Grid-cell"><!-- Insert here --></div>
</div>
I think you might be overthinking this one a bit. You don't need to set it up as a flex layout and you don't need to copy elements from one location to another. All you really need is to break a q element out of flow and display it in a predefined margin. We can do this using only padding-right and position: absolute.
Example here:
.Grid {
padding-right: 30%;
}
.Grid-cell {
border: 1px solid black;
}
q[cite] {
position: absolute;
left: 75%;
max-width: 20%;
}
q[cite]:before {
content: attr(data-index);
}
<div class="Grid">
<div class="Grid-cell">
<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<sup>1</sup> <q data-index="1. " cite="http://www.mashable.com/">nesciunt</q>. 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>
If you don't define a top or bottom property on absolutely positioned elements, they determine where they land based on where they'd appear in document flow. Therefore, by only setting position: absolute and left: 75% we've broken your citation out, kept it in-line with its source, and using the data-index property in conjunction with a content: attr(data-index); even given you the ability to number your citations to match their source inline.
Not using flexbox.
But using an internal span and positioning this can be achieved.
Incidentally, I have used a cite tag in place of the q tag as q renders automatic quotes. It may be possible to remove them using CSS but I haven't looked into that.
.Grid {
display: flex;
}
.Grid-cell {
border: 1px solid black;
}
.Grid-cell:nth-of-type(1) {
flex: 1 1 70%;
position: relative;
}
.Grid-cell:nth-of-type(2) {
flex: 1 1 30%;
padding-left: 20px;
}
sup {
font-weight:bold;
color: red;
font-size:.6em;
}
cite span {
position: absolute;
right:0;
margin-right: -8em;
}
<div class="Grid">
<div class="Grid-cell">
<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<sup>1</sup><cite cite="http://www.mashable.com/"><span>1. My Citation</span></cite>. 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="Grid-cell"><!-- Insert here --></div>
</div>
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