CODEWITHSUNDEEP
htmlcss
αƞjiβ
αƞjiβ

Reputation: 3256

Elements overlap when wrapping to next line

How can I prevent these buttons from overlapping each other when they wrap to the next line?

.button-link {
  background: #4479BA;
  border: solid 1px #20538D;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #FFF;
  margin-right: 10px;
  padding: 10px 15px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Amazon</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Auction</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">LinkedIn</a>
<a target="_blank" class="button-link" href="#">Mediacom</a>
<a target="_blank" class="button-link" href="http://mediacomtoday.com/usagemeter/index.php">Mediacom Usuage</a>
<a target="_blank" class="button-link" href="http://stackoverflow.com/">Stackoverflow</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Twitter</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">BofA</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Wells Fargo</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Chase</a>
<a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Citi</a>
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Mint</a>

View on JSFiddle

Upvotes: 1

Views: 2769

Answers (3)

crc442
crc442

Reputation: 627

Use display: inline-block and some margin-top/margin-bottom.

.button-link {
    margin-top: 5px;
    background: #4479BA;
    border: solid 1px #20538D;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFF;
    margin-right: 10px;
    moz-border-radius: 4px;
    moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    moz-transition-duration: 0.2s;
    moz-user-select: none;
    ms-user-select: none;
    padding: 10px 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    transition-duration: 0.2s;
    user-select: none;
    webkit-border-radius: 4px;
    webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    webkit-transition-duration: 0.2s;
    webkit-user-select: none;
    display: inline-block;
}

Fiddle

Upvotes: 0

showdev
showdev

Reputation: 29198

The buttons overlap because they are "inline" elements. Vertical padding on inline elements has no effect on surrounding elements. See this article on maxdesign.com for more information.

One method of preventing the overlap is to set each button to display:inline-block.
I also recommend adding bottom margin to create some space between "rows".

Inline-Block: The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
- display @ MDN

Keep in mind that white space between inline-block elements will be respected (displayed). If the extra space affects your design, you may want to remove it. One method is to remove space between the elements in your code. In my demonstration, I have moved each closing </a> to the next line, just before the next opening <a>, so that there's no space between one element and the next.

.button-link {
  background: #4479BA;
  border: solid 1px #20538D;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  color: #FFF;
  margin:0 10px 10px 0;
  padding: 10px 15px;
  display: inline-block;
}
<a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Amazon
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Auction
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">LinkedIn
</a><a target="_blank" class="button-link" href="#">Mediacom
</a><a target="_blank" class="button-link" href="http://mediacomtoday.com/usagemeter/index.php">Mediacom Usuage
</a><a target="_blank" class="button-link" href="http://stackoverflow.com/">Stackoverflow
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Twitter
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">BofA
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Wells Fargo
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Chase
</a><a target="_blank" class="button-link" href="https://www.bankofamerica.com//">Citi
</a><a target="_blank" class="button-link" href="https://citieasydeals.com/index.jsp">Mint</a>

Upvotes: 3

Joy Biswas
Joy Biswas

Reputation: 6527

Add a float:left; and margin-top:2px; to class .button-link 

.button-link {
    background: #4479ba none repeat scroll 0 0;
    border: 1px solid #20538d;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #fff;
    margin-right: 10px;
    padding: 10px 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    transition-duration: 0.2s;
    float:left;
    margin-top:2px;
}

Upvotes: 0

Related Questions