浮动图片溢出父div

Question

I'm trying to float:right; image next to paragraph <p> , which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height .

 .container { width: 70%; background-color: #777; margin: 0 auto; padding: 25px; } .content { width: 100%; height: auto; float: left; } .content .container { width: 70%; height: auto; background-color: white; /* overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container */ } .autoportrait { width: 20%; height: 20%; /* max-width:205px; max-height:265px; margin-bottom: 25px; */ padding: 10px 10px 10px 10px; border: solid; border-width: 2px; float: right; clear: both; } 

 <div class="content"> <div class="container"> <!-- <main> <section> --> <img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me"> <h2>Post title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. </p> <!-- </section> </main> --> </div> </div> 

I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles. I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.

Greetings from Varna, Bulgaria!

Answer 1

Make the div to clear it's children using :after pseudo class.

 .container{ width: 70%; background-color: #777; margin: 0 auto; padding: 25px; border:1px solid red; } .content{ width: 100%; height: auto; float: left; } .content .container { width: 70%; height: auto; background-color: white; /*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */ } .autoportrait{ width: 20%; height: 20%; /*max-width:205px; max-height:265px; margin-bottom: 25px;*/ padding: 10px 10px 10px 10px; border: solid; border-width: 2px; float: right; clear:both; } .container:after { visibility: hidden; display:table; font-size: 0; content: " "; clear: both; height: 0; } 

 <div class="content"> <div class="container"> <!--<main> <section>--> <img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me"> <h2>Post title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. </p> <!--</section> </main>--> </div> <div class="container"> <!--<main> <section>--> <img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me"> <h2>Post title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. </p> <!--</section> </main>--> </div> </div> 

Answer 2

Simplest solution is to use overflow: hidden; on .content .container .

I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.

 .container { width: 70%; background-color: #777; margin: 0 auto; padding: 25px; } .content { width: 100%; height: auto; float: left; } .content .container { width: 70%; height: auto; background-color: white; overflow: hidden; border: 1px solid #ccc; } .autoportrait { width: 20%; height: 20%; /* max-width:205px; max-height:265px; margin-bottom: 25px; */ padding: 10px 10px 10px 10px; border: solid; border-width: 2px; float: right; clear: both; } 

 <div class="content"> <div class="container"> <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me"> <h2>Post title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. </p> </div> <div class="container"> <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me"> <h2>Post title</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. </p> <!-- </section> </main> --> </div> </div>