I have a random layout issue — I’m still relatively new to web design and I’ve made way too much use of absolutely position layouts in the past and I’m trying to get away from it now. So here’s the situation:
I have a header that is fixed to the top. It has a height of 200px and a width of 100%. On the left side I have an image that I want to stay stuck to the left. On the right side is a horizontal nav UL. I want the image to stay put, and I want the nav to be centered in the remaining space on the right, adjusting as the browser is resized. This seems simple to me, but for some reason I can’t get it to work as I want.
Below is a screen shot — you can see that the nav is not centered:
Oops I stand corrected — I had left out a "px" after the left value of my ul, apologies!
While that does work it has the unfortunate side effect of collapsing vertically as the window resizes. I know this is because there is no fixed width on the UL, and adding one takes the centering away entirely. Is there any work around for this?