css - How do you float divs to the left? -


i'm trying better html coder, have decided away table layout. , use div layout instead, i'm getting issues positioning stuff using divs.

on page i'm trying add 3 images , text them, won't align using float, instead cascading.

here's markup:

<style> .left {    float: left; } </style> </head> <body> <div class="left">     <img src="images/image.jpg" alt="" class="left" />      </div>      <div>          text     </div>      <div class="left">     <img src="images/image.jpg" alt="" class="left" />     </div>     <div>         text     </div>      <div class="left">         <img src="images/image.jpg" alt=""  class="left" />     </div>     <div>         text     </div> </body> 

im hoping 1 of can point problem, (help! dont want go nasty tables! :))

here's picture:

enter image description here

edit: align them vertically

paul roub's answer closest, need space them up.

you don't need divs @ all. try html:

<img src="images/image.jpg" alt="" class="left" />  text  <img src="images/image.jpg" alt="" class="left" />  text  <img src="images/image.jpg" alt="" class="left" />  text 

and css put text aligned top of image:

.left {     vertical-align: top; } 

edit:
if want space between pictures css should like:

.left {     vertical-align: top;     margin-bottom: 10px; /* gives 10px of space @ bottom of image*/ } 

here's jsfiddle of complete solution.


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -