How do I prevent div contents from wrapping when window becomes too small?

Question

To preface this question, I am very VERY new to html/CSS so go easy on me please :)

I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.

The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.

The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right

I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.

In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.

I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)

I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants

Answer 1

You can specify

min-width

and/or

min-height

:)

Answer 2

overflow is your friend:

Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp