I was playing around today trying to get these 3 images to display side-by-side within a 300px wrapper (they were 100px each) with no borders or anything, just flush. The simplified code below worked:

<div id="wrapper">
    <img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" />

But this wasn't very tidy and I also wanted to do some other things like captions so I started formatting the code ready for more embedded inline divs or something, so here I go:

<div id="wrapper">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />

Refresh, and BOOM, the images now didn't fit and the last one was displayed below! I set all the margins and padding and anything else I could think of to 0 but it was still behaving in this odd way when I used carriage return in the editor, whats going on!?

2 answers


Elements that are inline, like img, are affected by white space. You can resolve your issue by floating the images (when they will become display:block;) and then white-space is ignored.

You will then likely need to use overflow:hidden; on the div to force it to shrink-wrap the floated elements.

Answered over 7 years ago by Tony Crockford
Mark 15

Know how if you enter more than one space in your HTML, it gets compressed into one? Same thing happens to your carriage returns. There's literally a space character in the output. Only way I know of fixing it is to put it back to how you had it before (on one line). Unless maybe you can hide it by setting the font-size to 0 or something, but I doubt that will work.

Answered over 7 years ago by Mark