css indentation

Answer 1

Have you tried putting both columns in and div and floating them left, as in:

<div style="float:left;">
  <img src="x"/>
</div>
<div style="float:left;">
  Text ....
</div>

Floating divs left will keep them side-by-side as long as there is enough room.

Answer 2

If the pictures will always be the same width, you can do this pretty easily. Place the picture in one div, and the content in another. Then use the following css:

div.pic {
    position: relative;
    float: left;
    padding-right: 10px;
    clear: left;
    width: 65px; /* The width of the picture */
}

div.content {
    position: relative;
    float: left;
    clear: right;
    width: 450px; /* The container's width minus (picture + 10px padding)
}

Answer 3

If the image is going to be the same width, the following code should work (tested in Safari 4).

Basically: float the image to the left, then push the text to the right using margins (padding also works). (The margin has to be at least the width of the image; preferably, it should be greater so that there's a gap between the image and the text.)

HTML:

<div class="box">
 <img src="http://url.to/image.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <p class="source">Source: Le Petit Robert 2009</p>
</div>

CSS:

img {
    float: left;
}

p {
    margin-left: 80px;
}

Answer 4

If it is just one paragraph you are concerned about, you can use:

p {
    overflow: hidden;
}

But that works for just the paragraph that starts next to the image.

Answer 5

Not recommended in all cases, but a good alternative if you don't want to/can't edit your markup: Equal height columns using Javscript