Mini-navbar with left, middle and right in HTML and CSS

user_1893768 0
Viewed 377

I want to make a very simple navbar with HTML and CSS (so simple I prefer to do it without Bootstrap), made of just three short texts, situated on the leftmost, center, and rightmost part of one single line.

My idea is that I cut the line in two halves, put the left & middle part in the first half, and the rightmost part in the second half. So I tried the following :

.div_left {
  float: left;
  position: absolute;
}

.div_right {
  float: right;
  text-align: right;
  position: absolute;
}

.container_for_mininavbar {
  width: 100%;
  position: absolute;
}

.mininavbar_left_half {
  width: 50%;
  float: left;
  position: absolute;
}

.mininavbar_right_half {
  width: 50%;
  float: right;
  position: absolute;
}
<div class="container_for_mininavbar">
  <div class="mininavbar_left_half">
    <div class="div_left">Left Text</div>
    <div class="div_right">Center Text</div>
  </div>
  <div class="mininavbar_right_half">
    <div class="div_right">Right Text</div>
  </div>
</div>

But that doesn't work, all the texts are on top of each other. What is the correct way to do this?

css html
2 Answers

Just remove position absolute. I'll suggest to use flexbox to do this and don't use float anymore

.div_left {
  float: left;
}

.div_right {
  float: right;
  text-align: right;
}

.container_for_mininavbar {
  width: 100%;
}

.mininavbar_left_half {
  width: 50%;
  float: left;
}

.mininavbar_right_half {
  width: 50%;
  float: right;
}
<div class="container_for_mininavbar">
  <div class="mininavbar_left_half">
    <div class="div_left">Left Text</div>
    <div class="div_right">Center Text</div>
  </div>
  <div class="mininavbar_right_half">
    <div class="div_right">Right Text</div>
  </div>
</div>

And this is a little example with flexbox

.container_for_mininavbar {
  width: 100%;
  border: 1px;
  display: flex;
}

.container_for_mininavbar div {
  flex: 0 1 33.33%;
  border: 1px solid #000;
  text-align: center;
}
<div class="container_for_mininavbar">
  <div>Left Text</div>
  <div>Center Text</div>
  <div>Right Text</div>
</div>

user_65928810

So, you want some links to the left, some to the center and the rest to the right? The easiest and most effective way (by me) is to use Flexbox.

So, you need a container div, named "navigation" (or however you want) which contains another 2 divs, one for the left side, and one for the right side.

Now, assign to the navigation div, the following:

display: flex; /* is going to display the div flex */

justify-content: space-between; /* this is where magic happens, it will push the items from the nav div, which are the other 2 divs to the left and right side*/

flex-flow: row nowrap;

The first property is for it to be displayed in a row, you can set it to column too, and the nowrap is not going to let the content to deform in some sort of way, if you set that to wrap, of course, it will wrap under, but I suggest letting that nowrap, but I don't think flex-flow is 100% neccesary in this situation

Now, the flexbox works for the other 2 divs as well, maybe you want the links in the left-side div to be "justify-content: space-between;" or space-evenly, or center, space-around, etc.

I recommend you to learn Flexbox, it's very useful and simple to use. I hope this answer will help you. :)

And to center the links in each div, use align-items: center; , it will center the links on the Y scale. (which is top-bottom)

EDIT: If you want center links too, it's the same thing, just make another div between the left-side div and the right div. And the justify-content: space-betweeen; it's going to have the same effect. And if you don't link how it scales, you can always use the margins in the div.

user_142272850
Related