Question

I’m having some trouble with a header in a webpage. It has several pages, and in one of them there are several big pictures. In that particular page I have observed that the header div moves a few pixels to the left, which is very obnoxious when changing between pages.

I know that the problem disappears when I remove the first picture (id=”problem1″), or one of the divs with two pictures ((id=”problem2″ and “problem3”)), but I can’t figure out what’s happening.

I’m using this css code to produce two colums:

.contenedor { overflow: auto; }

.div1 { float:left; width:440px;}
.div2 { float:right; width:440px;}

And this one for the header:

#header {
    height: 100px;
    background: #0072b8;
    font-family: Arial;
    font-size: 16px;
    color: white;

}

This is the header that magically changes its possition:

<div id="header">
        <a href="home.html"><img src="http://placekitten.com/237/100" width="237px" height="100px" border="0" style="padding: 0 3.5em; float: left;"></a>
    </div>

And this is the code that defines one of the divs that have two colums:

<div class="contenedor">
    <div class="div1">
      <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>         
    </div>
    <div class="div2">
       <a href="http://placekitten.com/300/305" class="lightbox"><img src="http://placekitten.com/300/305" width="300px" height="305px"/></a>
    </div>
</div>

You can see the rest of the code and its result here:
JSFiddle

What puzzles me the most is that if I leave just 2 of the problematic elements, the div position is the right one, the same one that in all the other pages that doesn’t have these pictures, but when I add the third one it moves.

Answer 1

This is happening because you have a scroll bar on some pages but not on others and your DIV elements are set to ‘auto’ so they expand the available browser space (which as im sure you know changes when the browser is resized, or in this case when the presence of a scroll bar changes the available space).

To fix this, it would be easiest to just design the page with

html {
overflow-y:scroll;
}

This will make sure that a scroll bar is on the page at all times and the page size won’t change over it.