my javascript is causing my div tag to push out of their allocated boxes

[andreea115]

hi everyone.

http://codepen.io/joe/pen/tHzmD

i have just built a page; the body spans the entire width of the window but the page content is set to 960 PX and is centered in the middle of the page.

the problem is that my navigation bar , which was built in Adobe Firework and uses Javascript “mouseover”, seems to be pushing itself out of the centered box and moving to the right edge of the window.

i have enclosed the full script in codepen.

You will note from my html the following:

**div tag “header”** – this is the div tag for the head section of the page

**div tag “body_header”**- this is the div tag that centered the contents to 960px

**div tag “lower_title_header”** – this is the div tag that contains the Navigation bar

The ** lower_title_header div tag** is contained within the **body_header tag**. so, it should be restricted to 960PX and centered in the middle of the page.

i am therefore unclear why it is pulling out of the box and now aligning to the left part of the window.

i have placed my html and css in Codepen:

http://codepen.io/joe/pen/tHzmD

it might however be easier to see the actual page on :

http://www.babysitter-agency.com/testpage_php.php

thank you very much for your kind attention.

warm regards

Andreea

[Paulie_D]

Try adding a width to the #lower_title_header of 960px.

However, I think you might find that if you add up the widths of the images they come to more that 960px. By my count 980px.

Frankly, I think you might be better off using a sprite. It will save on all that JS going on.

[Author]

Posts