CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

How to get div to be a percentage of a sibling element

I am attempting to get a div, bar-grow to be width: 80%; of the header above it. Right now, it is taking 80% width of the parent container. I am unsure how I change this so that it is working how I want it.

Any suggestions?

.header-wrap {
	border: 1px solid black;
}	
.header {
	font-size: 2rem;
	margin-bottom: 12px;
	display: inline;
}
.bar-grow {
	background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
	background-size: 100% 7px;
	transition: 1s;-webkit-transition: 1s;
	margin-bottom: 50px;
	height: 7px;
	width: 80%;
}
<div class="header-wrap">
  <p class="header">Structural Framing Solutions</p>
  <div class="bar-grow"></div>
</div>

Upvotes: 1

Views: 45

Answers (3)

Temani Afif
Temani Afif

Reputation: 272789

Why not simply move the gradient to the header element and control easily its size:

.header-wrap {
  border: 1px solid black;
}

.header {
  font-size: 2rem;
  margin-bottom: 52px;
  padding-bottom:7px;
  display: inline-block;
  background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
  background-size: 80% 7px;
  background-position:0 100%;
}
<div class="header-wrap">
  <p class="header">Structural Framing Solutions</p>
</div>

Upvotes: 2

Matie
Matie

Reputation: 181

I don't think there is an easy way to make a div like "bar-grow" 80% width of it's sibling (the text, "Structural Framing Solutions")... Technically, that text is sitting inside of a div that takes up the full width 100% of the screen, so your code is working as intended. An alternate approach, would be something like this:

.bar-grow {
    background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
    background-size: 100% 7px;
    transition: 1s;-webkit-transition: 1s;
    margin-bottom: 50px;
    height: 7px;
    width: 300px;
}

Notice how I changed 80% width to 300px width?

300px, roughly, is 80% of the title's length. I used my eye ball to choose the 300px. Make that small adjustment and see if it can work for you.

With my edit, it could render like this:

enter image description here

Hopefully I am understanding the problem, correctly!

Upvotes: 0

Becuzz
Becuzz

Reputation: 6866

You need something to wrap both of those elements that isn't a full width element. I added a div and set it to display: inline-block. You could apply that style to the header-wrap div if you don't want an extra div (note it will shrink that div to be just wide enough to contain it's contents).

.header-wrap {
	border: 1px solid black;
}	
.header {
	font-size: 2rem;
	margin-bottom: 12px;
	display: inline;
}
.header-width-constrainer {
    display: inline-block;
}
.bar-grow {
	background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
	background-size: 100% 7px;
	transition: 1s;-webkit-transition: 1s;
	margin-bottom: 50px;
	height: 7px;
	width: 80%;
}
<div class="header-wrap">
     <div class="header-width-constrainer">
			<p class="header">Structural Framing Solutions</p>
			<div class="bar-grow"></div>
     </div>
</div>

Upvotes: 3

Related Questions