Search code examples
htmlcssalignment

Text overflow with image float option

Well, i tried to place the picture on left, with float option, and no text should appear below the first image, until the bottom border. How can I achieve this? (I make the text long, because I need to consider different resolutions of different computer screens, it may wrap)

And another problem, the second image, I wanted its left side to be aligned with the right side of the first one, is that possible?

HTML is here:

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { 
                float: left; 
            }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> ThiThis is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraphs is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraph</p>
            <img src="61ab8006jw1dnfas8bvj9j.jpg" />
        </div>
    </body>
</html>

enter image description here

Solution

  • Maybe this suits your needs

    http://jsfiddle.net/uqJHf/246/

    The important part is the overflow:hidden

    Edit

    .content .image {
  float: left;
}

.content .image-aside {
  padding-left: 10px;
  overflow: hidden;
  clear: none;
}

.content .image-aside .image {
  margin-left: -10px;
}

.content {
  border-color: #666666;
  border-bottom: 3px solid;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}
    <div class="content clearfix">
  <div class="image">
    <img class="left" src="https://lorempixel.com/200/200/sports/1" width="200" height="200" />
  </div>
  <div class="image-aside">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, eius nobis natus dolores, suscipit minus maxime ullam fugit sequi, repellat rem? Distinctio placeat minus dignissimos, fugiat magnam magni totam vero nihil blanditiis fugit sapiente
      perspiciatis natus iure possimus odio impedit ex, ullam tenetur delectus voluptas? Quasi sed, ipsam vitae hic quam non pariatur ad labore accusamus at vero laudantium suscipit voluptatum, quod eveniet vel temporibus, doloremque voluptate veniam?
      Eos nobis dolore eligendi fuga id recusandae iure adipisci temporibus vero nemo harum ab obcaecati architecto, dolores dolorem, esse excepturi saepe quas voluptate beatae totam cum minus consequuntur. Perspiciatis debitis quasi explicabo, quo voluptatem
      omnis aliquam porro dolores nesciunt tenetur accusantium laborum sunt earum ducimus nostrum facilis mollitia vero, reiciendis molestias, similique molestiae impedit possimus? Dicta commodi perferendis vero alias autem fugit obcaecati, laborum ut?
      Dignissimos, vitae itaque nulla vel repellendus labore praesentium! Nostrum totam quam dignissimos unde eveniet architecto fuga ab aut repellat tenetur voluptates eum sint at modi saepe optio asperiores molestias, illo nobis odio nesciunt impedit
      ea. Quia labore, provident quo cumque nisi repudiandae repellendus odio voluptatem voluptatum ipsum molestias possimus sapiente eos iste repellat fugit minus atque harum necessitatibus. Tempora ipsa maiores corporis esse molestiae. Quisquam, animi
      aliquid.</p>
    <div class="image">
      <img class="left" src="https://lorempixel.com/200/200/sports/2" width="200" height="200" />
    </div>
  </div>
</div>