[frostbitexiii]

I am very picky and want to create a menu going across the page with spans and divs (well, I have navs and spans as I am trying in html5, but it isn’t necessary so I have simplified my question!). What it boils down to is basically this.

I have this code:

< html>
  < head>
    < title>Test< /title>
    < style>
      body * { border: 1px solid black; background-color: #999999; }
      span { float:left; display: block; width: 33.33%; margin: 5px; }
      .page { margin: 10px; background-color: #0000ff; }
      .menu { margin: 5px; background-color: #00ffff; }
    < /style>
  < /head>
< body>
  < div class='page'>
    < div class='menu'>
      < span>one< /span>
      < span>two< /span>
      < span>three< /span>
    < /div>
  < /div>
< /body>
< /html>

And I want to make it so that my spans all fit inside the blue div. perfectly.

I used to have a table which displayed this perfectly, but trying to write my code neater. Any advice? 🙂

Many thanks in advance!

Bob

[sparrow]

your widths make it so that they’re each 1/3rd of the width of the menu div. This would fill the div nearly completely (minus 0.01%) but the margins of 5px on each side of the spans then moves them sideways and knocks the last span onto the next line. I’d suggest making your margins percentages and messing with that and the widths to make it easier to make the entire width of the three around 100%.

eg.
span{
margin: 5px 0.5%;
width: 31.33%;
}

(I may be off with the numbers there)

[ar3]

I think you want what I have defined in this jsFiddle

The real magic sauce is in the overflow: hidden on the parent divb and the removal of padding and margin if you are going to do an exact 33.3% width. Of course if you want to have some padding and margin, you will have to adjust the width of the spans.

[shaunsantacruz]

One approach is to use the following basic html structure:
Fiddle

<ul class="menu">
    <li><a href="#">Uno</a></li>
    <li><a href="#">Dos</a></li>
    <li><a href="#">Tres</a></li>
</ul>

CSS:

.menu {
    background-color: #ddd;
    width: 100%;
    float: left;
}
.menu li {
    width: 33.3%;
    float: left;
    display: inline;
}
.menu li:last-child {
    width: 33.4%; /* 100% width, not 99.9 */
}
.menu li a {
    float: left;
    display: block;
    width: 100%;
}
.menu li a:hover {
    color: red;
}

This example doesn’t factor in borders. If you want borders, you’ll need to play with the percentages, to make everything work. Just remember that borders are factored into the width and height. Check out the Box Model

[isotrope]

If you’re feeling a bit adventurous, use the box-sizing: border-box property so that you don’t have to worry too much about your widths when it comes to calculating borders and padding (margins are still outside the calculation).

As others have pointed out, though, you’re busting out because you’re ending up with more 100% width:
( 33.33% width + 5px left-margin + 5px right-margin + 1px border-left + 1px border-right) * 3 = too much.

I’ve set up a little fiddle for you based on your original code: http://jsfiddle.net/HkF2d/1/
(also added little clearing element for your floats).

Cheers,
iso

[frostbitexiii]

What I ended up with was basically a combination of a few of them, but the actual answer I was after was to basically set all the borders/margins/padding of what used to be my span tags to 0 then use my anchor tags as block elements to add borders/margins etc to. Hopefully will work in all browsers and is a neat solution.

Thanks to you all for your help – couldn’t have gotten to this without you! 😀

Real-World js fiddle

HTML:

  <nav>
    <ul>
      <li style='width: 33.3%;'><a href='default.aspx'>One</a></li>
      <li style='width: 33.3%;'><a href='page2.aspx'>Two</a></li>
      <li style='width: 33.3%;'><a href='page3.aspx'>Three</a></li>
    </ul>
  </nav>

CSS:

nav {
    display: block;
    background-color: #000000;
    border: solid 1px #ff0000;
    margin: 10px;
    padding: 5px;
    overflow: hidden;
}
nav>ul {
    width: 100%;
    float: left;
    margin: 0px;
    padding: 0px;
}
nav li {
    display: block;
    float: left;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
}
nav a {
    display: block;
    border: solid 1px #ff0000;
    background-color: #ffffff;
    margin: 1px;
    padding: 3px;
    text-align: center;
}​

[Author]

Posts