Nested divs: how can I get overlapping borders?

Question

The following image shows the desired result:

Below where I arrived using position: relative:

<div class="tags-container">
    <div class="tag">Pizza</div>
    <div class="tag">Spaghetti</div>
    <div class="tag">Mandolino</div>
    <div class="tag">Pizza</div>
    <div class="tag">Spaghetti</div>
    <div class="tag">Mandolino</div>
    <div style="clear: both"></div>
</div>

.tags-container {   
    border: 1px solid #ff0000;
    width: 300px;
}
.tag {
    float: left;
    position: relative;
    top: -1px;
    left: -1px;
    padding: 5px;
    border: 1px solid #ff0000;
}

http://www.lucagiorcelli.it/test/testing-borders.html

Answer 1

You could reset top/left border to 0 and use top property an a negative value for margin-top to achieve the result.

Actually, there's no need to use reset the borders.

While relative positioning reserves space in the flow to prevent changing the layout, margin moves the element literally.

Thus you could add a negative top/left margin to the .tag elements. However there will be an extra border at the bottom of the elements in the last row.

In order to shift the border up, you could append a dummy child into the .tags-container and use a negative bottom margin for that element.

Since you are using a <div> element at the end of the .tags-container to clearing the float, you could apply the needed negative margin to that element as well.

<div class="tags-container">
  <div class="tag">Pizza</div>
  <div class="tag">Spaghetti</div>
  <!-- other .tag elements... -->
  <div style="clear: both"></div> <!-- Apply negative margin to this element -->
</div>

.tag {
  float: left;
  margin-top: -1px;
  margin-left: -1px;
  padding: 5px;
  border: 1px solid #ff0000;
}

.tags-container div:last-child {
  margin-bottom: -1px; /* This negative margin overlaps the bottom border */
}

WORKING DEMO.

---

Alternatively, you could use ::after pseudo element as the last child of the .tags-container to clear the float and apply the negative margin:

.tags-container:after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: -1px;
}

UPDATED DEMO.

Answer 2

Here's an alternative using a bit of hacks.

fiddle here

<style>
  .tags-container {     
    border-top: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
    border-left: 1px solid #ff0000;
    width: 100%;
    box-sizing:border-box;
  }
  .tag {
    float: left;
    top: -1px;
    left: -1px;
    padding: 5px;
    border: 1px solid #ff0000;
    margin-left:-1px;
    margin-top:-1px;
  }
  .bottomBorderHack{
    margin-top:-1px;
    border-bottom:1px green solid;
    width: 100%;
  }
</style>

<div style="width:10%;">
    <div class="tags-container">
        <div class="tag">Pizza</div>
        <div class="tag">Spaghetti</div>
        <div class="tag">Mandolino</div>
        <div class="tag">Pizza</div>
        <div class="tag">Spaghetti</div>
        <div class="tag">Mandolino</div>
        <div class="tag">Mandolino</div>
        <div style="clear: both"></div>
    </div>
    <div class="bottomBorderHack"></div>
</div>

Note, I used a green border-bottom so it's more visible. Also, your browser need to support box-sizing if you dont want to specify .bottomBorderHack and .tags-container width.