CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 359

How can I stop these inline elements overflowing the div?

I have a div with a solid border. Within this div are multiple 'tags', which should all be contained within the border of the div. I've used the following code to do this:

.sidebox {
  border-style: solid;
  width: 250px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
}
#tag {
  background-color: black;
  color: white;
  display: inline;
  padding: 5px;
  margin: 3px;
  text-decoration: none;
}
<div class="sidebox">
  <h2>Popular Tags</h2>
  <a href="" id="tag">Tag 1</a><a href="" id="tag">Tag 2</a><a href="" id="tag">Tag 3</a><a href="" id="tag">Tag 4</a><a href="" id="tag">Tag 5</a><a href="" id="tag">Tag 6</a><a href="" id="tag">Tag 7</a><a href="" id="tag">Tag 8</a>
</div>

The problem is that these tags overflow the div. There are displayed as one long line of tags. How can I make tags go down to the next line within the div, rather than overflow it?

I've tried using overflow: none; but this causes them all to overlap each other.

Upvotes: 0

Views: 228

Answers (1)

Francisco Romero
Francisco Romero

Reputation: 13199

Display them as inline-block instead of inline.

Also, you should use a class instead of ID for each tag. You have to use ID when the elements are unique. You have to use a class when you want to use a property in more than one element.

.sidebox{
    border-style: solid; 
    width: 250px; 
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;

}

.tag {
    background-color: black;
    color: white;
    display: inline-block;
    padding: 5px;
    margin: 3px;
    text-decoration: none;
}
<div class="sidebox">
     <h2>Popular Tags</h2>
     <a href="" class="tag">Tag 1</a><a href="" class="tag">Tag 2</a><a href="" class="tag">Tag 3</a><a href="" class="tag">Tag 4</a><a href="" class="tag">Tag 5</a><a href="" class="tag">Tag 6</a><a href="" class="tag">Tag 7</a><a href="" class="tag">Tag 8</a>
   </div>

Upvotes: 5

Related Questions