Layout moves few pixels when picture is inserted

Question

I am using Skleleton boilerplate for my simple website (http://tinyurl.com/mmzt9qa). Homepage works perfectly, but for some reason, when i insert 960px image in the 960px div box (aka 16columns), layout gets slightly moved to the left (this is especially visible on the logo, since the site is pretty basic). On the pages without the big image everything is fine. I checked is there any paddings/margins added, but i cant see anything... Basically:

<div class="sixteen columns">
    <p>This works perfectly</p>
</div>

<div class="sixteen columns">
    <img src="media/image.jpg" width="960" height="732"  alt="" class="responsive-image"/>
    <p>This makes the layout move</p>
</div>

For example check the first link on the site, and then check the fifth (McDonald’s - Playland) and you'll see what i mean. I tried lowering the image size, but it does the same thing even on 500px width...

what are the css properties for the class "sixteen columns"? — Kevin Holditch, Aug 13 '13 at 14:28
your CSS is a mess. Why don't you write a CSS from scratch? This type of working will give you nothing else than headache — Ali Çarıkçıoğlu, Aug 13 '13 at 14:35
Like John answered bellow, this is happening because scrollbar appears since the image is too hight, and its causing the layout to move to the left. About CSS, yep, it can be a lot cleaner, but for now it is okay, when everything is done i will reorganize it. — Mariola, Aug 13 '13 at 14:38
Ali, thanks for the help.But even if the logo is added in the separate div, the scrollbar is added and the page gets a bit less wide, so the layout moves. — Mariola, Aug 13 '13 at 14:55

score 1 · Answer 1 · answered Aug 13 '13 at 14:29

1

It looks like when an image is inserted it becomes too tall for the browser so it displays a scrollbar on the right, causing the logo to move to the left a little.

answered Aug 13 '13 at 14:29

John Boker

82,559
17
97
130

Thank you a bunch, i dont know didnt i saw that... Beside setting up overflow-y:scroll; to body tag (to show scrollbar on all pages - so its consistent) is there any other way to make it work? – Mariola Aug 13 '13 at 14:34
It's working correctly, the size of the document changes so the centered image has to recenter. the only way to keep it in the same position is to keep the document size from changing or to place the image in a fixed position from the left. – John Boker Aug 13 '13 at 14:37
Yea, by "making it work" i meant fixing the layout movement :) Thanks for your help! – Mariola Aug 13 '13 at 14:53

score 0 · Answer 2 · answered Aug 13 '13 at 14:40

Seperate logo from the container, and add as many images without changing layout after it.

LIVE DEMO

.logo
{
    background-image: url(http://webnroll.info/matt/images/logo.png);
    width: 460px;
    height: 221px;
    margin: auto;
}


.sixteen
{
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    background: white;
}

Layout moves few pixels when picture is inserted

2 Answers2