Keshav Vasudevan Keshav Vasudevan - 2 months ago 13
CSS Question

Background color around child elements

I have 2 child anchor tags inside a parent div. I want to add a background color and some styles to the child divs without affecting the entire row.

Here's my HTML:

<div class= 'about-header-container header-info' id='about-header' style='display: block;'>
<a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
<a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
</div>


and CSS:

.tablink {
margin-right: 20px;
}

.header-info {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
background-color: red; /* trial color*/
}


Fiddle: https://jsfiddle.net/kesh92/t5zzk6oc/
Currently, the red affects the entire row from the
bio-header
child div. If I add a
width
property to the
.header-info
parent div, then there's no precise way to wrap it exactly around the children, especially given the red
background-color
for the children divs wraps itself perfectly around the first child div (being
bio-header
). Please help me add the red color around the children divs with equal left and right margins.
Thanks in advance!

Edit: This is the result I want to achieve -
enter image description here

Answer

enter image description here

.header-info
{
  display: block;
  font-size: 0px;
 
}
.header-info a
{
  text-decoration: none;
  background-color: red;
  font-size: 15px;
  padding: 10px 20px;
}
<div class="header-info">
    <a class="anchor"  href='#bio-dashfolio'>Bio</a>
    <a class="anchor" href='#timeline-dashfolio'>Timeline</a>
 </div>

Comments