I am having problems centering elements in a fluid layout where the screen size is less than the screen size I'm developing on (1440 x 900 px).

For example, if you go to www.sdeyservices.co.uk with a screen width of 1440px you'll see that my navigation bar is centered. This is done with:

#menu-nav { padding: 5px 0 5px 20%; }

This is line 392 in my stylesheet.

If you then resize your browser to a width of 1024px you'll notice that the 'contact' list item moves below the other list items.

To me the obvious thing to do here is just use 'margin: 0 auto;' on the unordered list but this won't center the element.

If I reduce the left padding this will center it for 1024px width but then it won't be centered for 1440px width.

You can get around this issue with CSS3 media queries but this doesn't help me with IE.

Is there any way of keeping elements centered for users with different screen sizes?

Thanks in advance.

1 answer

Sisira 95
This was chosen as the best answer
.menu-header{text-align:center; display:block} /*This style should be added in the style sheet */`
#menu-nav {padding: 5px 0; width:auto} /*Update padding and Add width*/
#menu-nav li a { display: inline-block;}  /* Update the display: inline-block, remove the position rule and float rule */

Please note that the current highlighted style for the current tab should be need little change in the style. The appended style after clicking the top menu link tab should updated for the display property as display:inline-block.

Hope this will work for you.

Answered over 8 years ago by Sisira
  • Yes that worked. Thanks very much. If you have time I'd be interested to know how those CSS rules center the nav bar. It seems that setting the display properties of the elements makes a difference although I couldn't explain why. olivaw over 8 years ago