Weird styling issues with nav bar and footer

Question

I've got two styling issues. You'll find the full fiddle here . Please note I'm not using any media queries.

1st issue:

Upon re-sizing the browser unlike the header when scrolling horizontally (left or right) my footer seems to wrap itself round its content and leave a massive gap to the right

For example please re-size the browser to a width of 624px and then try scrolling to the right .. you will see this gap to the right of the footer.

I've set the footer width to a 100% but yet its wrapping itself round. Could it be the

overflow: hidden; 

property?

Any ideas as to why this is happening?

My desired outcome should be the footer appearing from one end of the browser to the other.

2nd issue:

Again this is to do with my browser resizing. Upon re-sizing the browser my navigation bar which is floated roght in the header seems to jump/move to the next line. I attempted several things as seen here but no luck.

Answer 1

width: 100% will size an element to the dimensions of its parent, unfortunately sizing a child to a particular dimension larger than a container won't automatically size the container to the same dimensions.

Basically the set-up you have is this:

body
  .maindiv (width: 1280px)
  footer   (width: 100%)

The footer is sized to the dimensions of the body, which, by default will be the width of the viewport. So this is why your footer is getting limited and not sizing to the size of .maindiv . There are three quick solutions to this.

1. Size your footer to the same width as .maindiv ie width: 1280px
2. Apply float: left to the body. This is a trick that forces the container element (ie the body) to wrap to its child elements dimensions. This should cause the body to take the same width as .maindiv automatically. There may be some unexpected side-effects of doing this however as floats can cause layout oddities.
3. Or you could move your footer inside .maindiv , that way it will automatically size itself to the right dimensions.

With regard to your other issue Frank Provost has commented correctly about that, so following his advice should fix that issue.

Update

As Frank mentioned, increasing your header min-width until the problem goes away is the solution, you can do this by trial and error, or you can measure it. In order to get your header to stop misbehaving you'll need a min-width of around min-width: 770px; . Basically setting the minimum width will prevent the internal children from wrapping down to the next row, but this will only work if the minimum width is the same or larger than the total horizontal width that the children occupy.

Note: If you add extra items to your header you will have to recalculate this value. A quick and visual way to do this on a Mac OSX operating system (the one I'm using now) is to use the region snapshot feature. Using CMD + SHIFT + 4 you'll get a target cursor that will allow you to draw a measured region on the screen. This allows you to measure pixels, you don't actually have to take the screen shot by hitting ESC . I'm sure there are equivalents to this for other operating systems. If not you can just measure each individual child using the browser's inspector, and then sum the result.