CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 724

Make a link background as wide as the container

How can I make a link's background as wide as the container it's inside?
My current code: 

.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
}

a.menuBtn, a.menuBtn:visited {
	background-color: blue;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 500px;
	text-decoration: none;
	color: white;
}
<div class="menu">
		<div class="menu_content">
			<a href="#" class="menuBtn">Start</a>
			
		</div>
	</div>

I want it to, no matter how long the link-text is, have the blue background as wide as the gray background. And the link-text to be 20px in from the left.

Currently the blue background gets wider if the text is longer, due to the padding. Tried a padding-right: 100% but obviously that didn't work. Worth a shot though

Upvotes: 0

Views: 67

Answers (5)

n1kkou
n1kkou

Reputation: 3142

a.menuBtn{ display: block; }

And remove the padding-right:500px

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use CSS's calc() function and display property on .menuBtn and remove the extra padding.

Like:

.menuBtn {
  display: block;
  width: calc(100% - 20px); /* Total Width (100%) - Padding (20px) */
}


.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
}

a.menuBtn, a.menuBtn:visited {
	background-color: blue;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	/* padding-right: 500px; */
	text-decoration: none;
	color: white;
}

.menuBtn {
  display: block;
  width: calc(100% - 20px);
}
<div class="menu">
		<div class="menu_content">
			<a href="#" class="menuBtn">Start</a>
			
		</div>
	</div>

Hope this helps!

Upvotes: 1

Arkej
Arkej

Reputation: 2251

I've added one more div as wrapper of the link with CSS:

.menuBtnWrapper {  
    padding: 20px;
    background-color: blue;
    width: 100%;
    box-sizing: border-box;
}


.menu {
	width: 500px;
	height: 100%;
	background-color: gray;
	left: 0;
	top: 0;
	position: fixed;
}

.menu_content {
	top: 50px;
	position: relative;
	width: 100%;
    background-color: red;
}

a.menuBtn, a.menuBtn:visited {
	text-decoration: none;
	color: white;
}

.menuBtnWrapper {  
	padding: 20px;
	background-color: blue;
    width: 100%;
    box-sizing: border-box;
}
<div class="menu">
		<div class="menu_content">
          <div class="menuBtnWrapper">  
			<a href="#" class="menuBtn">Start</a>
			</div>
		</div>
	</div>

Upvotes: 0

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

Just remove width property from .menu class:

.menu {
    height: 100%;
    background-color: gray;
    left: 0;
    top: 0;
    position: fixed;
}

Now, no matter how long the link is, .menu div will have the same width.

Edit: Or if you want the div to be at least 500px in width give him min-width: 500px; property instead of width

Upvotes: 0

KHUSHBOO
KHUSHBOO

Reputation: 24

use below css.

.menu {
            width: 500px;
            height: 100%;
            background-color: gray;
            left: 0;
            top: 0;
            position: fixed;
        }

        .menu_content {
            top: 50px;
            position: relative;
            width: 100%;
            padding: 20px 0;
            background-color: blue;
        }

        a.menuBtn, a.menuBtn:visited {
            text-decoration: none;
            color: white;
            padding: 0 15px;
            width: 100%;
        }

Upvotes: 0

Related Questions