CODEWITHSUNDEEP
htmlcss
keshinpoint
keshinpoint

Reputation: 1001

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

Upvotes: 0

Views: 1839

Answers (3)

zer00ne
zer00ne

Reputation: 43910

Use display:table on parent, and display:table-cell on each child. display:table-* wraps tight so use padding on each child for spacing as needed.

SNIPPET

.header-info {
  display: table;
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
  background-color: red;
  /* trial color*/
}
.tablink {
  margin-right: 20px;
  display: table-cell;
}
.bio-header {
  padding: 3px 15px 3px 5px;
}
.timeline-header {
  padding: 3px 5px 3px 15px;
}
<div class='about-header-container header-info' id='about-header'>
  <a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
  <a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
</div>

Upvotes: 0

Parth Patel
Parth Patel

Reputation: 3997

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>

Upvotes: 2

sol
sol

Reputation: 22949

Try this:

.tablink {
  padding-right: 20px;
  background-color: grey;
}

a {
  float: left;
}

.header-info {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}

Updated: https://jsfiddle.net/63nqdswL/

Upvotes: 1

Related Questions