CODEWITHSUNDEEP
csshtmlweb
Blodwen
Blodwen

Reputation: 145

Header div changes its position when other divs are added

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.

Upvotes: 1

Views: 293

Answers (2)

leigero
leigero

Reputation: 3283

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.

Upvotes: 2

bluetoft
bluetoft

Reputation: 5443

I believe the problem is that you have a scroll bar on the problem pages. Your content is longer then the height of the browser window. When your content is higher than the window a scroll bar is added to the page. This is unavoidable.

Upvotes: 0

Related Questions