CSS/HTML Navigation bar issue?

Problem is, is that you don't have a fixed width container you have width:100%, the site is liquid.

Problem is, is that you don't have a fixed width container you have width:100%, the site is liquid. You need to set a width on a container and it will play nice!

You have set the body width to 1330px. If you are really making a site for a client, you might be better of going with the "standard" maximum width of 960px. That way the site will work properly on most screen sizes.

Some reading that sides the magic number: cameronmoll.com/archives/2009/04/is_it_t... ps. You should not set the width to the body element itself, some older browsers are quite quirky with it, I think at least IE6 does not understand it, but cannot check now since I'm don't have it close to hand.

I don't think you have posted all the CSS styles in your question. Nevertheless, you have to fix the width of the navigation bar element in css. You could use a fixed width for your header div, but I'd use another div or ul for the navigation items and use fixed width on those, so that the rest of the items in the header can still float around.

You don't have a doctype and are in quirks mode. Add this to your first line and see where we stand.

There are quite a few ways of styling your navigation, and I made a variation on your layout to illustrate how you might approach it. Please see my variation at: jsfiddle.net/audetwebdesign/YzrUn/ and my following comments and explanation. CSS Styling You can take advantage of CSS selectors and get rid of unnecessary classes, thus simplifying your style sheet.

Keep the logo as a separate div in the header and use the ul list to mark-up your navigation links. You can either typeset your logo or use an image. Fixing the with of the logo div helps a bit, the height can be set to auto or fixed if you are using an image.

Let's float the logo div to the left and see how this all works out. Add the blue border to the header to serve as a visual separator. The Flexible Navigation Bar Set the margin of the 'ul' list so that it clears the logo div.

Since the logo is floated left, the left margin is needed otherwise the links will overlay the logo. We float the li elements to the left, add some margins, and then display the a navigation links as block's, add some padding. Note how I used the be to add the green punctuation, simpler than span+class.

Finally, add a class to the last li element so that you have a hook to style the iframe and other bits related to the social media sites. How This Works In my demo, you can vary the width of the output window. As you make the window narrower, the links (include the social media bits) will wrap around to the right of the logo and the header panel will expand vertically, thus allowing all the links to be accessible on smaller screens or to people who prefer to use a narrow browser window.

This way you don't have to fix the width of the page unless you have other reasons to do so. You can adjust padding on various elements to get the vertical alignment that you need. I think that there are enough adjustable elements here to take care of any eventualities in your design.

Finally, for best results, use a strict doctype, otherwise, quirks mode in IE may cause issues.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.