Responsive: two images should remain side by side - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Responsive: two images should remain side by side

deeper

2:15 am on Mar 16, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Hi,
my site has a three-column-layout and the centered content is about 600px.

Some of the text-heavy pages show on several occasions the following situation:
<---img1-250px---><-whitespace-><---img2-250px-->
<p.....two or three sentences, commenting both images.../p>

Responsive feature of my theme places img2 below img1 on almost all mobile devices, due to the insufficient width.
As all of them display more than 250px, on almost all mobile devices both pics are not resized and they are not side by side any more. Not good.

I have just discovered the following code, but it doesn't work in my two-pic-scenario:

img {
 max-width: 100%;
 /*min-width: 130px;*/
 height: auto;
}

On all desktops both images should be displayed with their true size, which is between 200 and 250px width, height is min. 150 and max. 250px. The average file size of a pic is about 10KB.

Both images should remain aligned side by side on all mobile devices - even on smartphones - and being resized due to the code above.

The whitespace separating both images could be a minimum of 10px.

How would you fix this understandably?

Several layers of divs, CSS and some mathematics?

<div><div><img class="pics alignleft wp-image-100 size-full" width="250" height="167" /></div><div><img class="pics wp-image-200 size-full" width="250" height="167" /><br class="clear" /></div></div>

lucy24

3:56 am on Mar 16, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

If you need two images side by side, you'll have to set some smaller number, like

div.picturepair img {max-width: 45%;}

Constrain it to images inside a named div, because for other images a max-width of 100% is closer to what you want.

<br class="clear" />

Not sure what that's intended to do, but it looks like a clunky workaround :)

Any horizontal measure that involves both pixels and percentages will break under some circumstances. You could try a

div.picturepair .gap {max-width: 9%;}

When setting widths in percentages it tends to be safest if they add up to a little under 100% to allow for linewidths and random oddities.

deeper

3:33 pm on Mar 16, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

For testing purposes and in order to get clear and distinct results I deleted the "100%-code" in my stylesheet. So at the moment there is only


.block-type-content div.entry-content img {
 max-width: 45%;
 height: auto;
}

How many divs are necessary and what div(s) should have class="picturepair"?

A. Each pic gets its div and class:

<div-img1 class="picturepair"><img1></div>...<div-img2 class="picturepair"><img2</div>

B. Like A., but there is an additional div wrapping both img-divs:

<div><div-img1 class="picturepair"><img1></div>...<div-img2 class="picturepair"><img2</div></div>

C. Additional div wrapping both img-divs and it gets the class:

<div class="picturepair"><div-img1><img1></div>...<div-img2><img2></div></div>

All three seem to work!?

You're right, the "100%-code" is needed too, for example single pics which are more than 350px wide:

.block-type-content div.entry-content img {
 max-width: 100%;
 height: auto;

How can I separate both properly and distinctly? Due to CSS-hierarchy the named div you suggested should do its job, not being overruled?

<br class="clear" /> stops floating. CSS-floating may be used in order to let text flow around a pic aligning two pics in blockelements side by side. Without stoping this explicitly, often you get it filled with following content, for example the caption.

lucy24

6:10 pm on Mar 16, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I'm envisioning the structure as something like this

<div class = "picpair">
<img blahblah
<span class = "gap">&nbsp;</span>
<img blahblah
<p class = "caption">Descriptive text</p>
</div>

And then you could have

<div class = "pictrio">
<img blahblah
<span class = "gap">&nbsp;</span>
<img blahblah
<span class = "gap">&nbsp;</span>
<img blahblah
<p class = "caption">Descriptive text</p>
</div>

each with its own css, like
div.picpair img {max-width: 45%;}
and
div.pictrio img {max-width: 30%;}

<br class="clear" />

Is the intent of this line to prevent the div from ending (for example with a visible background or border) before its content is done? If so, it makes sense. At least I hope it does, as I've got analogous stuff myself. Wouldn't have thought of using the <br> element, though. I use an empty, zero-height paragraph.

deeper

10:52 pm on Mar 16, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Using images in Wordpress with alignleft/alignright "floats" the image(s) automatically, i.e., without doing it intentionally in your stylesheet. Therefore all following content fills all the available width, for example 600px. Two floated pics of 250px without "gap" would fill 100px with my img-comment in < p >.

There are several ways to "clear" the floating. Furthermore you can "clear" the following HTML-element - the < p > in my example - or you create additional elements like < br >.

The cleared element, < br > or < p >, is not floating any more. Like any usual block-element it starts in a new line.

How to clear, what ways are proper in what situation?
[stackoverflow.com...]
[stackoverflow.com...]

Due to your examples you don't think EACH pic should have its OWN div?

45% of 600px = 270px, but in my two-pic-scenario no pic exceeds 250px width. Sure, it's a "max.", so all pics, which are 200 - 250px wide, are displayed properly in their true width, right?

45 + 45 + 9 = 99%, not 100%, in order to be "safe", as you hinted.

bird

9:26 pm on Mar 25, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You need both images in a common "container" div to keep them from wrapping. Any extra div for each of them would be redundant (unless you need those eg. for placing captions).
You also don't need an extra "gap" element, as you can have the same effect just with a margin of the right size.

div.twopic_container {float if you want; size as needed}
div.twopic_container img:first-child {margin:0px 4% 0px 0px; width:45%; height:auto;}
div.twopic_container img:last-child {margin:0px 0px 0px 4%; width:45%; height:auto;}

<div class="twopic_container">
 <img src="a.jpg"><img src="b.jpg">
</div>

If you use extra divs, then they will get the margins instead, and the images use 100% within them.

deeper

1:13 am on Mar 26, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Some days ago I did it exactly as you suggest.

Regarding the number of divs (after researching the web) I had found an example with double divs and a further one with only one common div. Therefore I was uncertain what the difference could be.

In WP the extra gap element doesn't work. I suppose the automatic floating of "alignleft images" in WP pushes it to very right side. Besides WP encourages to set image margins by webmasters stylesheet.

Hm, 4% for each image. I gave the left image 8% margin-right, no margin for the right image. Is there any difference, should be the same, shouldn't it?

The width of some image pairs is not exactly equal, for example
left image: 240, right image 250.
Responsive resizing then creates different HEIGHTS.

Furthermore the browser resizing seems to be work worse than I supposed: Some of the pics become unsharp on smartphones (320px). Surprising, isn't it? A small pic of 250px in good quality should be resized less than 50% without becoming unsharp.

lucy24

4:07 am on Mar 26, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

It now occurs to me to wonder if a multi-columned layout would be a viable alternative. Then you could code for a "column-gap" instead. Of course it always depends on how badly you need to support MSIE < whatever-it-is.

bird

10:57 am on Mar 26, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

In WP the extra gap element doesn't work. I suppose the automatic floating of "alignleft images" in WP pushes it to very right side. Besides WP encourages to set image margins by webmasters stylesheet.

If at all possible with WP, do not assign "alignleft" or "alignright" classes or any other automatic floating properties to those images, or weird stuff may happen.

Hm, 4% for each image. I gave the left image 8% margin-right, no margin for the right image.

It's the sum of margins that matters. I just split them in my example for the sake of symmetry...

The width of some image pairs is not exactly equal, for example
left image: 240, right image 250.
Responsive resizing then creates different HEIGHTS.

If their pixel width is different, then you need to adapt their percentage width accordingly:
left image: 45.9%; right image: 44.1% (deviation from average 245 pixels)
But I'd recommend to crop/scale them to the same proportions, or you'll have to create new style rules for each instance where you do this (apart from the asymmetric gap looking strange).

Some of the pics become unsharp on smartphones (320px). Surprising, isn't it? A small pic of 250px in good quality should be resized less than 50% without becoming unsharp.

That points to an outdated browser using an inadequate interpolation algorithm.
On a high resolution (eg. retina) display, the images should actually look even more crisp at >=50% scaling, because the browser has distinct values available for each hardware pixel.

deeper

1:01 pm on Mar 26, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

@lucy24:
Then I had to start my layout from scratch again. Not all pages have content pics. The pages which have content pics are mainly informational pages with a lot of text and additionally some pice.

@bird:
Thanks for your help.

Uploading images with WP you have to choose: alignleft, alignright, aligncenter, alignnone. As I need "floating" and the left image should be placed on the left side I have to choose alignleft.

What "weird stuff" could happen?

Regarding browser resizing: What about smartphone resolution (320px) without retina, but using an actual Firefox?

not2easy

2:03 pm on Mar 26, 2015 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

If you want to have control of your images you need to create a folder (or folders) for them in your directory structure outside of WP and link to them there. Otherwise WP handles the sizing and resolution of your images.

If you use the WP editor to write your html content, especially the Visual (Drag and Drop wysiwyg) Editor it will automatically add classes to your images such as class="alignleft". You can create your own external stylesheet or you can edit the WP stylesheet to add your own classes or to define the classes it automatically uses. You can also use inline styles.

I would be careful with doing any style edits unless you are certain of what classes exist and are being applied and what properties are being inherited. The edits to the WP stylsesheet will be applied to all existing content. Even externally linked images will get default classes applied to them if you are using the Visual Editor. You can remove those classes but they will be applied again. Defaults.

bird

2:45 pm on Mar 26, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Uploading images with WP you have to choose: alignleft, alignright, aligncenter, alignnone. As I need "floating" and the left images should be placed on the left side I have to choose alignleft.

You want the container div to float (if at all), and not the images within. If the scaling of the images with all margins sums up to less than 100% horizontally, then they will get arranged next to each other without floating themselfes.
One of the weird things that could happen when the images float is that the container div will not expand to their height anymore (give it a border temporarily to see this), and text following the container may try to fill into spaces where it isn't supposed to go.
Perhaps in your arrangement that mechanism won't have any detrimental effects, but that may be browser dependent behaviour. And in any case the non-floating solution is cleaner and easier for the browser to handle.
If the images don't line up correctly, make sure you don't have any whitespace between them.

<img ...> <img ...> - space (or newline etc.) character requires extra room
<img ...><img ...> - no space, no problem

deeper

5:17 pm on Mar 26, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

@not2easy:
Some months ago I decided to ignore the visual editor in future, but uploading images in HTML mode still assigns my pics all usual WP classes. It's standard behaviour of WP and shouldn't cause big issues, shouldn't it? Img-margins are styled in my external stylesheet. I add this class manually to the img-tag after upload and inserting the image into the WP-page.

I agree it's better to work with usual WP features as long as it does not cause big issues.

@bird:
There is no whitespace between both images.

In order to avoid following content to fill empty space after "silently" floated things by WP I "clear" floating by <br class="clear" /> in my stylesheet. I guess this is what I explained in my second post of MAR 16 after lucy24 wondered about this clunky workaround :)

You're right: WP floats images automatically if using alignleft/alignright and very often webmaster must clear this without knowing about it. WP should give a hint for the need to clear.

bird

6:48 pm on Mar 26, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Obviously, it would be much more elegant to set those images to "alignnone" and avoid the clearing <br>.
There's no point in setting anything to float when the floating behaviour isn't actually desired, is there? ;)

deeper

9:29 pm on Mar 26, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Not "desired", but needed.
With "alignnone" I have to find another way to let both images display side by side, for example "display: inline-block".

In terms of "elegance" :) I guess there is not a big difference then. In case of doubt I usually tend to choose "default" ways of WP.

As far as I know "float" and "clear" belong together as standard CSS properties for many years. I think the main issue is not really floating behaviour; it's "WP behaviour", i.e., not telling clearly what they do (though WP-codex does anywhere probably). Like visual mode, which delets valide code.

lucy24

9:34 pm on Mar 26, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Then I had to start my layout from scratch again.

Oh, heavens, I didn't mean the whole page. I just meant restyling the div that contains the pictures. Something like

div.sharedpicture {column-width: 260px; column-gap: 10xp;}

and then the browser itself figures out if it can fit all pictures side by side or has to spill them onto separate lines. For backward compatibility, each occurrence of "column-anything" is actually three things: column-blahblah, -moz-column-blahblah and -webkit-column-blahblah.

But I digress.

As far as I know "float" and "clear" belong together as standard CSS properties

They often occur together, but you can have one without the other. "clear" by itself means "don't start this element until any earlier floats have finished".

bird

8:13 am on Mar 27, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

With "alignnone" I have to find another way to let both images display side by side, for example "display: inline-block".

I'm not sure why you think so. As long as the total width of the images is less than 100%, displaying side by side within the parent div is what happens by default. If it doesn't, then maybe you have some other margins/borders/padding (of the images or the container div) interfering. In that case, you should either remove those or include them in your width calculations.

With a standards conforming browser, and no other extra styles, the code I posted above shold give exactly the desired result.

it's "WP behaviour", i.e., not telling clearly what they do

Most browsers will show you in their webmaster-"inspector" tools which styles they apply and what box model measurings result from them. That might help you figure out what actually happens.

Btw: For historical reasons, images always behave like "inline-block", even if their formal default may be "inline".

deeper

2:49 pm on Mar 27, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

As long as the total width of the images is less than 100%, displaying side by side within the parent div is what happens by default.

Yes, img-tags are inline-elements. May be my last post was confusing or at least not precide enough.

I started this thread because of a responsive issue ("Responsive..."). On almost all mobile devices (not only smartphones) the width of both images lets the browser push the right pic below the left one.

bird

9:10 pm on Mar 27, 2015 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Does it also do that in the "mobile emulation" mode of Chrome or Firefox?
If so, please check in the inspector what the actual width, padding, and margin values of all involved elements are.
Without this information the discussion will keep going in circles.

And now for something completely different:
You could also just merge those two pictures into one file with Photoshop...
That might make sense if you don't use them elsewhere on the site, and if it turns out too cumbersome to work around WPs "smarter than the webmaster" attitude.

deeper

4:05 pm on Mar 28, 2015 (gmt 0)

10+ Year Member

Top Contributors Of The Month

Does it also do that in the "mobile emulation" mode of Chrome or Firefox?
If so, please check in the inspector what the actual width, padding, and margin values of all involved elements are.
Without this information the discussion will keep going in circles.

I test it only with "resizer bookmarklet" (FF and IE), but it seems to be a quite normal behaviour of all browser, no mistake or too big margins/paddings unintentionally ect.
Two pics plus "gap" plus normal padding ect. exceed the container width on most mobile devices. Browser shouldn't stack the right pic below the left one then?

Floating (by WP) and "clear" do their job for responsive purposes - more or less elegant :). It's o.k. for me this way.

Regarding Photoshop:
Interesting idea. Two pics become one. What about the gap, filling it with background color or transparency? At the moment I don't want the pics to be part of Google's image search, so this is no problem. However there is only ONE "alt" and "title attribute" then.

not2easy

4:36 pm on Mar 28, 2015 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

The resizer bookmark is a little javascript that does not apply any mobile emulation, it only resizes the browser window so the the page/css may not realize it has been resized. If you have FF, you should try the Developer Tools, they may be shown in the "Mobile" looking menu in the upper right corner of the browser. That lets you view pages with some degree of Mobile emulation, and it has the inspector tools that let you see the css that is being applied to each element. I believe the Developer Tools started with FF 32.