Text and Image Alignment with Bootstrap Grid System

Question

Here's a photo of a div that I am trying to make with text left aligned and an image floating right. The image has to be top to bottom (i.e. 100% height of that of green container). I want to make the height of div adjustable to the content. (More the content, more the height). However, the image should always be top right of a suitable height. The problem is, that my text is going under the image and not following the alignment where it should stay on left until the image is there and then should go below the image (spanning whole screen/green div or text wrapping as we call it) and be normal aligned once the image has ended.

Please Help.

    <div class="gtco-container-fluid" style="background- color:#00a652; height: auto;">

        <div class="row animate-box">

        <div class="gtco-container">

            <div class="col-md-7">
                <h2 style="color:white;font-weight: bold;padding-top:20px;">The heading</h2>
                <p style="color:white;font-weight:bold;font-size:20px;">hhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                </p>
                <p style="color:white;font-weight:bold;font-size:20px;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                   </p>


            </div>
        </div>
               <img src="images/default.jpg"; width="600px"maxheight="600px;" style="position:absolute;right:0px;padding-left: 25px;">

        </div>

    </div>

CSS:

   .gtco-container {
   max-width: 1140px;
   position: relative;
   margin: 0 auto;
   padding-left: 15px;
   padding-right: 15px;
   }

Answer 1

All the inline styles are making me blind. This should work:

<style>
    * { word-break: break-all; }
</style>

<div class="gtco-container-fluid">
    <div class="row animate-box">
        <div class="gtco-container">
            <div class="col-md-7">
                <h2>The heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                   Nullam commodo pharetra urna sit amet interdum. Donec 
                   efficitur urna quis arcu tincidunt, ut vehicula augue 
                   rhoncus. Proin metus velit, dictum vitae libero sed, 
                   condimentum faucibus mi. Fusce rutrum lorem id metus 
                   varius congue. Nunc sagittis lacus nec blandit ultricies. 
                   Duis mattis justo ac dictum bibendum. Nulla molestie 
                   tellus vitae lectus bibendum, cursus varius lectus 
                   consequat. Etiam placerat dignissim arcu, quis lacinia 
                   quam tincidunt in. In quis tellus eu turpis varius 
                   imperdiet ut in turpis. Vestibulum id lobortis turpis. 
                   Quisque leo nisl, vulputate eu mi ut, luctus scelerisque 
                   massa. Suspendisse potenti. Nulla id sodales ligula. 
                   Vestibulum ante ipsum primis in faucibus orci luctus et 
                   ultrices posuere cubilia Curae.</p>
            </div>
            <div class="col-md-5">
                <img src="images/default.jpg" width='100%'height='100%' />
            </div>
        </div>
    </div>
</div>

Answer 2

The image is beneath your text because the browser interprets the "hhhhhh...", as a single word, but it doesn't know how to break it, so it doesn't.

@Lalit Sachdeva 's answer is ok, but it won't work in firefox(at least the codepen example doesn't on my latest firefox) and works differently in ie11 https://gist.github.com/argyleink/5463021

When testing layout, you should try to use lorem ipsum or, better yet, real text, which has a mix of long and short words...you can go to your favourite news site and copy some text out of a random article.

Answer 3

Please use

p {
  word-break: break-all;
}

or

<p style="color:white;font-weight:bold;font-size:20px;word-break: break-all;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                   </p>

here is the codepen link demonstrating the same https://codepen.io/team/css-tricks/pen/avavBY