Question

I have created a web page that has two bars across the top of the page (for navigation and twitter updates).
How I’ve done this is by creating two divs for each bar, one div inside the other. The reason for this is because I would like the bar to scale across the whole page but the content to be limited to a fixed width.

Now this works fine “normally”, however when the browser screen width is less than the child div width then it overflows outside the parent div.

I have a live demo of the page here:
http://tinyurl.com/7qj3pzs

EDIT:
I have added min-width to the parent div, seems to have fixed the issue 😀

Answer 1

On the parent div, you need to set the following CSS:

#parentDiv {
    overflow: hidden;
}

assuming this is the HTML:

<div id="parentDiv">
   <div id="childDiv"></div>
</div>

I also happened to notice that on the “charts” section you are popping a bunch of JQuery animations onto the animation queue. It will prevent animations from overloading the queue and animating even after the mouse is gone if you chain the .stop() method into the animation like so:

$('a').stop().animate();