Float left div not taking up all the width

Question

I have the following snippet where i want the side-text div to be placed on the right side of the image, but unless i specify the with of this side-text div, it will automatically move to the bottom (as it is now)

I have tried displaying the elements with display:inline-block but then the side-text div gets aligned to the bottom of the image.

https://jsfiddle.net/f0jheskv/

 .content { width: 800px; margin-left: auto; margin-right: auto; } .text { padding: 10px; background-color: rgb(150, 150, 150) } .code { padding: 10px; background-color: rgb(200, 200, 200) } .side-text { background-color: rgb(200, 100, 100) } .img-strip { width: 100% } .img-strip img, .img-strip div { float: left } .clear { clear: both } 

 <div class="content"> <h3> Title </h3> <div class="text"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. </div> <div class="img-strip"> <img width="320px" height="240px" /> <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div> </div> <div class="clear"></div> <div class="code"> <pre> for(int i=0; i<9; i++){ a=0; b=3; } </pre> </div> </div> 

Answer 1

You can set your div to the desired width and then use display:flex; on the .img-strip container. This way, the div height is enlarged to the images height. Here is a great tutorial about the flex property.

 .content { width: 800px; margin-left: auto; margin-right: auto; } .text { padding: 10px; background-color: rgb(150, 150, 150); } .code { padding: 10px; background-color: rgb(200, 200, 200); } .side-text { background-color: rgb(200, 100, 100); float: right; flex: 1; } .img-strip { width: 100%; display: flex; } .img-strip img { float: left; } .clear { clear: both; } 

 <div class="content"> <h3> Title </h3> <div class="text"> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. </div> <div class="img-strip"> <img width="320px" height="240px" /> <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div> </div> <div class="clear"></div> <div class="code"> <pre> for(int i=0; i<9; i++){ a=0; b=3; } </pre> </div> </div> 

Answer 2

Float just the image, not .img-strip div and remove the display: inline-block; from .side-text :

jsFiddle example

Or use display: table-cell to position them:

.img-strip img,
.img-strip div {
  display: table-cell;
  vertical-align: top;
}

.img-strip {
  display: table;
}

jsFiddle example