Skip to main content

Arranging Pictures In Your Posts, Side By Side

Having published Arranging Pictures In Your Posts, which hopefully explains several frequently asked questions
  • How do I get my pictures into the middle of the posts?
  • Why aren't my pictures clickable, to show the full size content?
  • Why do I always have to move the pictures from the top, into the text?
I find that there's a fourth question that gets asked.
How do I display pictures next to each other, not on separate lines?

With the latter question, I would typically answer by advising
Use nested tables.
That makes an effective workaround, although a clumsy one.

But it's possible to simply float pictures side by side, if they are small enough to fit into the space provided. That's not so hard to do, just make them small.

Here are two pictures, as I would normally set them up.








<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s1600-h/DSCF0048.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:320px; height:240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s320/DSCF0048.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825377860724418" /></a>
<br clear=left />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s1600-h/DSCF0018.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:320px; height:240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s320/DSCF0018.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825369165730978" /></a>
<br clear=left />


Besides the size problem - those pictures will not fit next to each other, given the space in most browser windows - there is another reason why you do not see them side by side.
<br clear=left />


So, make the pictures smaller, remove the break between the two pictures, and what do you get?





<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s1600-h/DSCF0048.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:160px; height:120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s320/DSCF0048.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825377860724418" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s1600-h/DSCF0018.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:160px; height:120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s320/DSCF0018.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825369165730978" /></a>
<br clear=left />


Or even smaller, if you want to put half a dozen pictures there.





<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s1600-h/DSCF0048.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s320/DSCF0048.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825377860724418" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s1600-h/DSCF0018.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s320/DSCF0018.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825369165730978" /></a>
<br clear=left />

This is a fluid template. If you make the browser window narrow, the post column will become narrow. See what happens if you make the post column too narrow to show both pictures side by side - grab the size of the browser window, and move it inward.

Also, watch out for the "display:block;" snippet. display:block; is part of the thumbnail code, and has the same effect as <br clear=left />.





<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s1600-h/DSCF0048.JPG" target="_blank"><img style="border-width:0px; display:block; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s320/DSCF0048.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825377860724418" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s1600-h/DSCF0018.JPG" target="_blank"><img style="border-width:0px; display:block; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s320/DSCF0018.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825369165730978" /></a>
<br clear=left />

You will need to change all instances of "display:block;", if you want a set of pictures to float, side by side.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s1600-h/DSCF0048.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNl9IzBxQEaWeyvLxgAb6Q0iNId1i0cYpasCeunuf5G4xv1Dv2ppxbNCVI54ohhIUkYkSb6YI87UstP0Hilg8UMPHVbapl9hhKFUG4WzGcukfwv8cd12LTpOiOll2ltaCDcfDjg/s320/DSCF0048.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825377860724418" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s1600-h/DSCF0018.JPG" target="_blank"><img style="border-width:0px; float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand; width:80px; height:60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdV-4ktTtrb21Y5mh43sHckohyiaKsKX3_-OT_k_04rqHDBQm5EdLR_GFU9JVCKDh6utJ9FNBkQWOEJJpko4OrksGuTpL9QY4bjSyYurk9nl3VVNTTGAoiH-dsFbaR-HHCLVH9Q/s320/DSCF0018.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5378825369165730978" /></a>
<br clear=left />

Comments

Unknown said…
Great post and good tutorial on arranging photo's in blogger.
Doobie said…
thank you thank you thank you!
The Burmese Mom said…
Thanks. You've been a big help to me..a newbie.
Kay Alexis said…
what about youtube videos?
Nitecruzr said…
Kay,

If you make a YouTube video small enough, remove the "display=block", and if your browser does not require use of the "float" setting to display an embedded object side by side, then any video should display side by side. I'm not confident that it would be a consistent behaviour, for all browsers, though.

http://blogging.nitecruzr.net/2006/11/including-video-in-your-post.html

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".