Anchor tag with display block not taking space of its parent container

noblerare 0
Viewed 16

I have a parent div which contains two elements, a small tag and an a tag. Currently, we can see that the parent wrapper has a height and width.

Now, I need to remove that small tag whilst keeping the space that the a tag would take up. I've tried applying both display: block and display: inline-block to the anchor tag but as soon as the small tag is removed, the parent wrapper collapses.

Any help would be greatly appreciated.

https://jsfiddle.net/jghdewqv/

.wrapper {
    background-color: lightblue;
}

a {
    background-color: firebrick;
    display: block; /* Also tried inline-block */
    float: right;
}

small {
    background-color: pink;
}
<div class="wrapper">
    <small>Left text here</small>
    <a href="#">Some link here</a>
</div>

css
2 Answers

Actually, You need a clearfix CSS code here, You can learn about it from Bootstrap https://getbootstrap.com/docs/4.0/utilities/clearfix/

Here is an example after using clearfix css.

.wrapper {
  background-color: lightblue;
}

.wrapper::after {
  display: block;
  content: "";
  clear: both;
}

a {
  background-color: firebrick;
  float: right;
}

small {
  background-color: pink;
}
<div class="wrapper">
  <a href="#">Some link here</a>
</div>

Vijay Hardaha0

It doesn't collapse it just doesn't have a height height:20px;

https://jsfiddle.net/jghdewqv/

.wrapper {
    background-color: lightblue;
    height:20px;
}

a {
    background-color: firebrick;
    float: right;
}

small {
    background-color: pink;
}
<div class="wrapper">
    <a href="#">Some Link here</a>
</div>

UmairFarooq0
Related