0

Menu bar columns

I am trying to make a bar with 3 columns but I cannot get the <a> to divide equally.

if I put a width of 33% the bar is disarmed, only with 30% width it stabilizes but the columns do not remain in equal parts. 

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
}

.MenuDown a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}

.a1,
.a2,
.a3 {
  width: 30%;
}
<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>
Community
  • 1
  • 1
Tarenk 77
  • 95
  • 1
  • 6
  • 2
    what do you mean by 'disarmed' width of 33.33% works fine! and unless you're experimenting with CSS, `float` shouldn't be used for layout purposes any more there are better rules – kapreski Apr 30 '20 at 03:43
  • Browser you intend to support? Just specify browser and version number. – Phoenix Apr 30 '20 at 03:49

3 Answers3

1

Try this in you main Div MenuDown: 

 display:flex;
 justify-content:space-between;

You don't have to use width for <a> tag you just have to use .MenuDown a{...} to have width:100; and flex will take care of the rest equally without the width.

This will help you to have same space between number of items you have inside div.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  border: 1px solid black;
  width: 100%;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}
<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
  • 1
    As per the question requirements, he need to devide it in 3 equal parts. This will not do that. It just increase the space between items but not equal – Atul Rajput Apr 30 '20 at 03:47
  • @Atul it is not about the anchor tags since those are and `anchor` class not needed, you have to set ` width: 100%;` for `.MenuDown a`. `a` are inline element. It happened because OP added 30% to anchor tag usually you have to use justify-content and 100% width will give you the exact width equally. I have updated my code if you can take a look. – Manjuboyz Apr 30 '20 at 03:55
  • yes, it will work now, but don't forget to remove the extra code which is doing nothig here, like a float on acnhor, and if you gave width 100% to anchor then you do not need the space between property on its parent. – Atul Rajput Apr 30 '20 at 04:01
  • Will you remove the downvote incase if you're the one who did then? I see you have used same code as what I listed here. – Manjuboyz Apr 30 '20 at 04:02
  • 2
    Yes I down voted it, no offence, I have used the same code but made the significant changes in it as mentioned in my above comment, I am removing the downvote but just want to discuss fair things, that's why that vote was for. – Atul Rajput Apr 30 '20 at 04:04
  • Thanks for the kind gesture! I personally just feel downvote is not needed so comments will help people to modify the code and make it better, so even after that if they don't modify the code then it calls for downvote. – Manjuboyz Apr 30 '20 at 04:09
1

The problem you are having here is due to float and inline display of anchor, as per kapreski there are new and advance rule, so no need to use float in this scenario, just try flex and give equal width to all the elements, so you can do this in many ways.

I have shown one in the snippet and others are as follows.

  1. If you don't want to use flex, then its okay, just make display of anchor block or inline-block and make its width 33.33% and no need of float, display inline-block or block is needed just because inline items do not accets width.
  2. 2nd option is using flex but different approach, in my example, you can give anchor width 100% as well, as its parent does not have flex-wrap: wrap property, they will take equal width and will be side by side.

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.MenuDown {
  position: fixed;
  bottom: 0%;
  left: 0%;
  background-color: #f5d94e;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
  width: 33.33%;
}

.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}
<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>
Phoenix
  • 188
  • 1
  • 15
Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
1

You could consider using CSS grid, but it isn't supported as well by IE9 (although it was invented by them). What align-items:end; does is position items at the end of the container. grid-template-rows: 1fr; is to set it to one row and grid-template-columns: repeat(3, 1fr) is to divide it into 3 equal containers. repeat(x ,y) repeats y x times. 

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.MenuDown {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr); //or use 33.33% in place of 1fr
  align-items: end;
  position:fixed;
  bottom: 0%;
  background-color: #f5d94e;
}
.MenuDown a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
  font-size: 17px;
}
.MenuDown a:hover {
  background-color: #ddd;
  color: white;
}
<div class="MenuDown">
  <a class="a1" href="#torneos">home</a>
  <a class="a2" href="#perfil">Contact</a>
  <a class="a3" href="#intercambios">About</a>
</div>

Credit to explaining how to make grid items go to bottom: Position grid items starting at the bottom
Phoenix
  • 188
  • 1
  • 15