How do I place images side by side in div? (wordpress)

Question

I have been using the code from here but ever since I needed to wrap my images in a div, it doesn't work even though I changed the selector to images. Had to wrap images in a div to style it to have different width from the text.

This is what I have in my functions to wrap my images in a div:

<?php

function breezer_addDivToImage( $content ) {

   // A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
   // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $replacement = '<div class="image">$1</div>';

   // run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

   // return the processed content
   return $content;
}

add_filter( 'the_content', 'breezer_addDivToImage' );

?>

And this is the CSS regarding it:

#image {
        margin: 0px auto 24px !important;
        float: left !important;
    display: block;
}
#image:after { clear: both; }
#image:before, .halfeach:after { content: ""; display: table; }
p #image img { width: 49%; margin: 0; }
p #image a:first-child img { float: left; }
p #image a:last-child img { float: right; }

I have an example post here.

THE EDITED CSS:

    .alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignright {
    float: right;
    margin: 0 0 50px 0;
    display: inline-block;
}
a img.alignleft {
    float: left;
    margin: 0 0 50px 0;
    display: inline-block;
}
#page-container .image {
    margin: 7px 0px !important;
}

to display side by side should `display` be one of the `inlines` like `display:inline`? — Quinton Bernhardt, Jun 09 '13 at 05:37

score 0 · Answer 1 · answered Jun 09 '13 at 05:42

0

You're container is too small for the images to fit next to eachother, that's why they are pushed down.

Secondly your using the class .image but you're using the ID #image in your CSS, so that won't work either. So change that.

Two options:

Make sure your images are 50% of the width (if 2 images)
Make your content container bigger so both images would fit next to eachother.

answered Jun 09 '13 at 05:42

user2019515

4,495
1
29
42

All right, managed to add the changes you mentioned. But I have been trying to add some space between the 2 vertical images and the horizontal image, but nothing seems to be working. The 7px margin I have doesn't show for some reason. – user2446412 Jun 09 '13 at 15:17
That's because those divs are floated (they don't know their height). You can fix that by adding a div with `clear:both;` after your image. I don't understand though, why would you wrap your images in a div, why not just float the images? – user2019515 Jun 10 '13 at 00:29
It seemed like the only way to style the images to have a different width from the text in content. Unless there's a better way? – user2446412 Jun 10 '13 at 04:44
Just use `img` in your stylesheet rather than `.image` and adding an extra div – user2019515 Jun 10 '13 at 20:35
For some reason, the images follow the width of the text despite my code: `.content img { margin: 7px 0px !important; width: 905px !important; }` – user2446412 Jun 11 '13 at 08:04

score 0 · Answer 2 · answered Jun 09 '13 at 10:31

0

You need to have float:left for both images and give width:50% for image class

answered Jun 09 '13 at 10:31

Mitesh Vora

458
8
21

How do I place images side by side in div? (wordpress)

2 Answers2