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

Question

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!

Billy Moat · Accepted Answer · 2012-12-18 15:26:03Z

1

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>

answered Dec 18, 2012 at 15:26

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Billy Moat Over a year ago

Which width? The container? It will still work but the container will stretch to the width of it's parent. You can avoid this by setting the container to be display:inline-block

Dawson · Accepted Answer · 2012-12-18 16:07:11Z

1

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/

edited Dec 18, 2012 at 16:07

answered Dec 18, 2012 at 15:40

Dawson

7,5871 gold badge28 silver badges25 bronze badges

2 Comments

Dawson Over a year ago

Just pretend <span></span> is <img>: Answer updated. See 'working code would be...'

Dawson Over a year ago

The first line of CSS would need to swap "span" for "img" as well. ie: .left-img img {...} instead of .left-img span {...}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related