Question

I’ve been struggling with this for a day or so now and I’ve gone back and started from square one a couple of times but I’m trying to get a horizontal css flyout header to work as I want.

The dropdown bit I want to expand as wide as needs be (it’d be great if the category names were forced to be on one line) while the container expands to accommodate them. A fiddle will explain better.

http://jsfiddle.net/HyuLy/

Any ideas?

Answer 1

You have a few width: 100%‘s that are ruining your layout because of your padding‘s. width is the inside width of the element, so when you combine width:100% with, let’s say, padding:20px your element is now 100% + 40px.

Also, you have a few float: left‘s that shouldn’t be there as well. If you’re stacking the elements vertically still, there’s no need to float: left.

Take a look at this: http://jsfiddle.net/scrimothy/mxW4y/

Since there’s so much going on here, you may want to copy this css back into your text editor to see it better. I’ve removed a few widths and floats