CODEWITHSUNDEEP
htmlcssnavbar
peke_peke
peke_peke

Reputation: 551

creating a navbar, items using full space (css)

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. picture

Upvotes: 0

Views: 60

Answers (4)

Rowel Rhoy
Rowel Rhoy

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

mzrnsh
mzrnsh

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

ketan
ketan

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>

Working Fiddle

Upvotes: 0

Pugazh
Pugazh

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

Related Questions