CODEWITHSUNDEEP
csshtmlpositioning
meda
meda

Reputation: 45490

How do you float divs to the left?

I'm trying to be a better html coder, so I have decided to get away from table layout. And use div layout instead, but I'm getting issues positioning stuff using divs.

On my page I'm trying to add three images and text to them, but they won't align using float, instead they are cascading.

here's my markup:

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

    <div class="left">
    <img src="Images/image.JPG" alt="" class="left" />
    </div>
    <div>
        some text
    </div>

    <div class="left">
        <img src="Images/image.JPG" alt=""  class="left" />
    </div>
    <div>
        some text
    </div>
</body>

Im hoping one of you can point the problem, (Help! I dont want to go back to nasty tables! :))

Here's a picture:

enter image description here

EDIT: I would like to align them vertically

Paul Roub's answer is the closest, but just need to space them up.

Upvotes: 0

Views: 237

Answers (6)

Sourabh
Sourabh

Reputation: 8482

Yo want something like this?

CSS

.img {
    height: 100px;
    width: 200px;
    overflow: hidden;
    border: 2px solid black;
    float: left;
}

HTML

<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>
<div class="img"><img src="http://i.imgur.com/fqct5Us.gif"></div>
<p>Lorem ipsum dolor.</p>

Its pretty simple, just don't float the container of text.

Upvotes: 0

matewka
matewka

Reputation: 10148

You don't need the divs at all. Try this HTML:

<img src="Images/image.JPG" alt="" class="left" /> 
some text

<img src="Images/image.JPG" alt="" class="left" /> 
some text

<img src="Images/image.JPG" alt="" class="left" /> 
some text

And this CSS to put your text aligned with the top of the image:

.left {
    vertical-align: top;
}

EDIT:
If you want some space between the pictures then your CSS should look like:

.left {
    vertical-align: top;
    margin-bottom: 10px; /* that gives you 10px of space at the bottom of an image*/
}

Here's a jsfiddle of the complete solution.

Upvotes: 3

Mauricio Ulloa
Mauricio Ulloa

Reputation: 532

The best way is making float:left and then clear:both.

<style>
    .inline { float:left; }
    .clear { clear:both; }
</style>
</head>
<body>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 1</center></p>
    </div>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 2</center></p>
    </div>
    <div class="inline">
        <img src="http://umbra.nascom.nasa.gov/images/latest_aia_171_icon.gif">
        <p><center>Text 3</center></p>
    </div>
    <br class="clear">
</body>

You can see the example here. I hope it works.

Upvotes: 0

Jacques
Jacques

Reputation: 3774

Not sure if this is what you want, but here is a fiddle:

http://jsfiddle.net/gGxEn/

HTML:

<div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

    <div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />some usce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

    <div class="left">
    <p><img src="Images/image.JPG" alt="" width="100px" height="100px" class="left" />someusce consequat ipsum nunc, nec condimentum dui cursus id. Ut consequat scelerisque urna, non porttitor tortor blandit vitae. Fusce scelerisque sem congue risus condimentum.
</p>
    </div>

CSS:

.left
{
   float: left;
    width:33%;
}

.left img{
    padding:5px;
}

If you want them stacked on top of one another, add clear:both to the left class.

here is another fiddle:

http://jsfiddle.net/gGxEn/1/

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

Another approach: float both the text and image divs left, and clear floats on the images:

.left {
  float: left;
  clear: left;
}

.left + div {
 float: left;
}

Example: http://codepen.io/paulroub/pen/knbBJ

Upvotes: 1

Max
Max

Reputation: 765

Your text needs to be inside the floated div

<div class="left">
 <img src="Images/image.JPG" alt="" class="left" /> 
 text
</div>

<div class="left">
 <img src="Images/image.JPG" alt="" class="left" />
 text
</div>

<div class="left">
 <img src="Images/image.JPG" alt=""  class="left" />
 text
</div>

Upvotes: 0

Related Questions