Search code examples
csspositioningborderborder-layout

Border positioning: how to?

I want to position the border, but this won't work. This is the CSS:

.menu-container {
    border-top: 5px solid #81806E;
    float: left;
    margin: 5px 27px 0 10px;
    width: 704px;
}

The problem is that this container, contains menu links. So if I adjust the width and margin, the border is coming with it. But I want to style it separately... How can I do this?

Solution

  • Check the sample design and code with result, is this you want?

    HTML:

    <div class="menu-container">
      <a class="menu-item" href="#">Menu 1</a>
      <a class="menu-item" href="#">Menu 2</a>
      <a class="menu-item" href="#">Menu 3</a>
      <a class="menu-item" href="#">Menu 4</a>
      <a class="menu-item" href="#">Menu 5</a>
    </div>

    CSS:

    .menu-container {
    float: left;
    margin: 5px 27px 0 10px;
    width: 704px;
}
.menu-item{
  float:left;
  height:20px;
  margin-right:3px;
  border-top: 5px solid #81806E;
}