How can I stop an element skipping onto the next block level?

Elements dynamically repositioning themselves by moving to the next line is actually a positive thing if done properly, as it conveys responsive design. You normally get this when you use relative units (like %) to determine the dimensions (width and height) of your elements.

One way to avoid this is by using fixed units (like pixels) to determine the dimensions of your elements and therefore prevent them from automatically repositioning themselves. Note that when doing this, users will usually see scrolls bars in their browsers, which they'll be compelled to use in order to view the rest of your content whenever they are viewing your site on smaller devices. I don't think that's too ideal, in my opinion.

Relative units are the way to go, in my opinion. Just make sure you keep a neat design by setting a reasonable space (margins and padding) around each element so they scale properly and are stacked nicely near other when they reposition themselves.

You could set the div (and assuming all these are contained in a div) with a specific width that covers all the elements and maybe absolutely position them.

div {
position: absolute;
width: 900px
}

It seems to me that you have several floated elements, and you don't want to have one or two on the next row right?

What this basically means is that in the container for those elements (could be a surrounding div or just the body) is smaller than the width of the elements, the margins and the paddings combined. So for instance your blocks are 100px wide, they have a margin of 10px, a padding of 10px and a border of 1px. The total size of one element would then be 100 + (2 * 10px) + (2 * 10px) + (2 * 1) = 142px. Your containing element's width should be the number of elements, mulitplied by the total width (142px) in order to have all elements in one row. That's often difficult to wrap your head around in CSS, but it's how the browser works. (A way to circumvent that is to use box-sizing: border-box, Google that for some fun!)

If you make the browser screen wider, they are all in one row right?

There's a lot of options to fix this, depending on what behavior you would like to see. This is one of the challenges of responsive design. If you have 10 elements, people typically like to see all those elements in one row or two rows of 5. This might be bad reasoning, because reasons for this are symmetry and visual appeal and not ease of use (although these are all related). But let's say you have good reasons for this, than I would opt to create two divs surrounding the elements. One div wraps the first five, another div the second five. Give both div's the same width (calculated based on the number of elements, the margin and the padding) and float them. The groups of five will remain. If the screen can only fit 9 elements, it automatically puts the second div in the second row.

You would have to make media queries for this to work on very small screens, where even 5 elements in a row won't fit. At that point, you could set float to none and width to 100% to revert back to the original situation.

But one could also argue that this behavior you are seeing, is actually very good! It means whatever the screen width, there will be no horizontal scroll bars and instead the elements automatically fit on the page. You might want to increase the bottom margin on the elements to prevent them touching each other, but otherwise it's fine really.

Thank you all for the advice. I managed to fix it using a min-width on the header container.

Cheers again guys.