Float CSS: flotando una imagen a la izquierda del texto

Question

Para cada buzón, quiero que la miniatura flote a la izquierda y que el texto flote a la derecha. No quiero que el pulgar se ajuste al texto.

Aquí está mi código html:

<div class="post-container">     
    <div class="post-thumb"><img src="thumb.jpg" /></div> 
    <div class="post-title">Post title</div> 
    <div class="post-content"><p>post description description description etc etc etc</p></div> 
</div> 

He intentado algunas maneras y todavía no puede conseguir que funcione ... el texto no se mostrará a la derecha ...

Aquí está mi código CSS:

.post-container{ 
    margin: 20px 20px 0 0; 
    border:5px solid #333; 
} 

.post-thumb img { 
    float: left; 
    clear:left; 
} 

.post-content { 
    float:right; 
} 

Answer 1

Esto es lo que eres fter?

• que cambió su título en una etiqueta h3 (cabecera), porque es una elección más semántica que usando un div.

Live Demo #1
Live Demo #2(con cabecera en la parte superior, no está seguro de si quería que)

HTML:

<div class="post-container">     
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div> 
    <div class="post-content"> 
     <h3 class="post-title">Post title</h3> 
     <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p> 
    </div> 
</div> 

CSS:

.post-container { 
    margin: 20px 20px 0 0; 
    border: 5px solid #333; 
    overflow: auto 
} 
.post-thumb { 
    float: left 
} 
.post-thumb img { 
    display: block 
} 
.post-content { 
    margin-left: 210px 
} 
.post-title { 
    font-weight: bold; 
    font-size: 200% 
} 

Answer 2

salida esta muestra: http://jsfiddle.net/Epgvc/1/

acabo Floate d el título a la izquierda y agregó un clear:both div a la parte inferior ..

Answer 3

Establezca el ancho de post-contenido y post-thumb para que obtenga un diseño de dos columnas.

Answer 4

.post-container{ 
 
    margin: 20px 20px 0 0; 
 
    border:5px solid #333; 
 
    width:600px; 
 
    overflow:hidden; 
 
} 
 

 
.post-thumb img { 
 
    float: left; 
 
    clear:left; 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid red; 
 
} 
 

 
.post-title { 
 
    float:left; 
 
    margin-left:10px; 
 
} 
 

 
.post-content { 
 
    float:right; 
 
}

<div class="post-container">     
 
    <div class="post-thumb"><img src="thumb.jpg" /></div> 
 
    <div class="post-title">Post title</div> 
 
    <div class="post-content"><p>post description description description etc etc etc</p></div> 
 
</div>

jsFiddle

Answer 5

sólo tiene que flotar ambos elementos restantes:

.post-container{ 
    margin: 20px 20px 0 0; 
    border:5px solid #333; 
} 

.post-thumb img { 
    float: left; 
} 

.post-content { 
    float: left; 
} 

Editar: en realidad, no es necesario el ancho, simplemente flotar tanto a la izquierda

Answer 6

casi siempre sólo tiene que utilizar overflow: hidden en mi texto-elementos en esas situaciones, a menudo funciona como un encanto;)

.post-container { 
margin: 20px 20px 0 0; 
border:5px solid #333; 
} 
.post-thumb img { 
float: left; 
} 
.post-content { 
overflow:hidden; 
}