2

I've created a horizontal navigation menu in HTML using <ul> and inline-block display styling. I'm wanting to set the background colour of the containing <div>, but it isn't working. It's as though the <div> isn't wrapping around the <ul>.

The first <div> is supposed to set the background colour for the entire width of that part of the page. The second <div> then sets the width of the navigation menu within that area, and centres the <div> so that the unused space is evenly distributed either side.

Here's the code:

<div style="background-color: #302683">
    <div style="margin: 0 auto; width: 80%">
        <ul style="padding: 0; margin: 0">
            <li style="display: inline-block; float: left"><a href="#design" title="Design" style="text-decoration: none; color: #FFFFFF; display: inline-block; text-align: center; padding: 20px">Design</a></li>
            <li style="display: inline-block; float: left"><a href="#proofreading" title="Proofreading" style="text-decoration: none; color: #FFFFFF; display: inline-block; text-align: center; padding: 20px">Proofreading</a></li>
        </ul>
    </div>
</div>

Also, how would I centre the <ul> within the second <div>, so that the <li>s appear in the centre?

yndajas
  • 69
  • 6

1 Answers1

-1

This should work: <div style="background-color: #302683; overflow: hidden;">

See the example: http://jsfiddle.net/b8q836zs/1/

Overflow: hidden|auto will make an element establish a 'new block formatting context' — an isolated container, which will keep it from flowing into the space occupied by preceiding floats — see: CSS 2.1 - floats.

Oriol
  • 11,660
  • 5
  • 35
  • 37