Unable to centre image

Hi

I have a box at the bottom of the page (Crowne Plaza logo + Best Price Guarantee) that has 2 images side by side. As the screen narrows they go on eon top of the other, which is normal and desirable. However, the second image comes out of the box at very low screen width around 300px

I tried a number of things including putting the second image inside its own div, but then the 2 images no longer stay side by side at high screen widths.

What can I do, please?

http://pintotours.net/TEMP1/NEW.html

Just like many of your previous problems, this is due to your use of margin/padding.
You gave the “Best Price” image uneven padding on the sides. Try giving it a uniform padding of 20px all round. Then to make it fit the box and maintain aspect, give the image box-sizing: border-box with max-width: 100% and height: auto

3 Likes

Hi Sam

Do you mean like this? the second image still comes out of the box at low width

#logoimg {
text-align:center;
margin:0 20%;
border: 2px solid gray;
padding: 0 10px;
 box-sizing: border-box; 
max-width: 100%;
height: auto;
}

I would do something like this.

@media screen and (max-width:640px){
#logoimg{padding:0 0 20px;margin:0 20px;}
#logoimg img{display:block;margin:auto;max-width:100%;height:auto;}
}

You should also snip the 40px of white space off your Best price guarantee image because although the image is centred you have 40px off white space ion the image itself making it look off.

4 Likes

Not the container, but the image in the container.

That’s what I tried to do before by creating a div for the second image, but then the 2 images go vertical at high widthe

Let me try Paul’s next and then come back yo your (Sam) idea. I necer used box-sizing and I understand that it does not work wiith IE9 and earlier

Yes, that does it!

Many thanks, both.

It works from IE8 and upwards and was actually the default box model for IE in the early days or in IE pages without doctypes.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.