fartagaintuxedo fartagaintuxedo - 3 months ago 10
CSS Question

Float left div not taking up all the width

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

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

Comments