CSS: Image and text to the right on one line, no flow text?

1
votes

I want to display an image with text to the right of that image. This should all be on one line and inside some more text. I dont want the rest of the text to flow around the image.

Example:

Some Text ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

my image and my text

Some more text ... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

I dont want the text after the image to flow around it. I tried float:left for the image, which aligns it to the left, but I dont know how to say that only some text goes next to it.

Any help?

Thanks!

2
cssalignment

2 Answers

1
votes

Here's one way to do it: http://jsfiddle.net/2BJ7J/

Basically you're floating the image and text to the left with a container.

.container {
    width:480px;
    padding:20px;
    border:1px solid #ccc;
    overflow:auto;
}
.container img {
    float:left;
    width:260px;
    margin:0 20px 0 0;
}
.container .text {
    float:left;
    width:200px;
}



<div class="container">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" />
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis, lorem eget pulvinar faucibus, diam tortor dapibus sapien, a egestas massa arcu ac risus. Ut tempor condimentum tincidunt. Donec vehicula, dui ornare ornare mollis, arcu nibh interdum ipsum, eu condimentum enim nunc id enim
    </div>
</div>
1
votes

CSS

p { line-height:1.5; outline:1px dashed green }

.left-img span { /* span would be `img` in your project */
    float:left;
    margin-right:1em;
    /* BEG not needed for image */
    background-color:gray;
    width:20px;
    height:200px;
    outline:1px dotted;
     /* END not needed for image */
}

.left-img + p { clear:left; }
​

HTML

<p>Lorem ipsum ....</p>
<p class="left-img"><span></span>More text</p>
<!-- Replace <span></span> with <img>
---- working code would be:
---- <p class="left-img"><img src="...">More text</p>
-->
<p>Lorem ipsum ....</p>
​

Look at the semantics of your mark-up and take advantage of the natural document flow. The last line of the CSS above is the key: "The <p> following a left-img class needs to return to normal document flow."

Fiddle: http://jsfiddle.net/MP8GJ/1/