CODEWITHSUNDEEP
htmlcsspositioning
menardmam
menardmam

Reputation: 9986

css indentation

I like to do, as in indesign or quark... paragraph indent... for picure

how is the proper way to do that in html and css

I dont want the text to go round the image... i like to have the whole left part protected putting margin to the picture will do the trick... but for 10-20-30 pixel (fixed amount (bad))

i have try negative positioning.. no luck !

here is a little image that explain !

alt text http://produits-lemieux.com/indent.jpg

Upvotes: 1

Views: 482

Answers (5)

eozzy
eozzy

Reputation: 68730

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

Upvotes: 0

jeroen
jeroen

Reputation: 91762

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.

Upvotes: 0

Steve Harrison
Steve Harrison

Reputation: 125640

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;
}

Upvotes: 3

Tomas Aschan
Tomas Aschan

Reputation: 60664

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)
}

Upvotes: 0

cdonner
cdonner

Reputation: 37708

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.

Upvotes: 5

Related Questions