Reputation: 551
I'm not an expert using css, after 1 hour of time spent on this problem I will ask the community.
my html code:
<div class="content2">
<div class="Menu">
<a href="/all">All Investments (3)</a>
<a href="/payouts">Payouts (0)</a>
</div>
...some other code
</div>
my css code:
.content2 {padding: 10px 30px; color: #fff}
.Menu {background: #022000; width: 1000px; height: 50px; margin: 20px auto; text-align: center}
.Menu a {float: left; height: 26px; width: 313px; padding: 12px 10px; color: #fff}
.Menu a:hover {background: #277521}
I would like the two items in my Menu class full fill the width of the navbar. Currently they don't take the complete width of the navbar.
Upvotes: 0
Views: 60
Reputation: 1
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
<a href="/all">All Investments (3)</a>
<a href="/payouts">Payouts (0)</a>
</div>
...some other code
</div>
Upvotes: 0
Reputation: 2370
Try it with flex. Add these styles:
.Menu {display: flex;}
.Menu a {flex: 1;}
This will work with any number of menu items, not only 2.
Tip: flex is a very powerful property and I suggest you research it a little if you are interested why my code works.
Upvotes: 0
Reputation: 19351
Try following way.
Give width:50%
and box-sizing: border-box;
to a
. And change height:50px;
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 50px;
width: 50%;
padding: 12px 10px;
color: #fff;
box-sizing: border-box;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
<a href="/all">All Investments (3)</a>
<a href="/payouts">Payouts (0)</a>
</div>
...some other code
</div>
Upvotes: 0
Reputation: 9561
Use width: 50%;
and modify the padding as padding: 12px 0px;
.
Explanation:
width: 50%
: As there are 2 elements, this will enable each element to take 50% of the parent's width.
padding: 12px 0px
: padding 0px for right and left helps remove the extra space required for each element.
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
<a href="/all">All Investments (3)</a>
<a href="/payouts">Payouts (0)</a>
</div>
...some other code
</div>
Upvotes: 3