CSS Navigation - way without flex

Question

Is this example down below realizable without `display: flex;` and `flex: 1 0 0;`?

How can I set height of .navigation to 100% but minus height of SignOut automatically? I have tried calc(100% - SignOutHeight) but SignOutHeight can be dynamic... Only flex model offers this option or exists different way?

jsfiddle

https://jsfiddle.net/Lny303nh/3/

    body {
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    .experiment {
      background: #f00;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-bottom: 16px;
      padding-top: 16px;
      position: fixed;
      width: 320px;
    }
    
    .navigation {
      flex: 1 0 0;
      overflow: auto;
    }
    
    .navigation__links {
      padding-left: 16px;
      padding-right: 16px;
    }
    
    .navigation__link {
      background: #f00;
      color: #fff;
      padding: 16px;
    }
    
    .navigation__link_active {
      background: #fff;
      color: #000;
    }

    <div class="experiment">
      <div class="navigation">
        <div class="navigation__links">
          <div class="navigation__link">
            Name
          </div>
          <div class="navigation__link">
            Sign In
          </div>
          <div class="navigation__link navigation__link_active">
            Sign Up
          </div>
        </div>
      </div>
    
      <div class="navigation__links">
        <div class="navigation__link">
          Sign Out
        </div>
      </div>
    </div>

Why use css tables when flex provides a simpler solution that is well supported? — Julio Feferman, Oct 10 '17 at 17:15
Why not just use floats if you don't want to use flex? Applying float: left; to all navBar elements will align them all vertically. — Jared Bledsoe, Oct 11 '17 at 16:33

score 0 · Answer 1 · answered Oct 14 '17 at 15:33

Here's an example using CSS float as requested, using % width so it is responsive. If you want them vertically like in the image, just remove the float: left;

.navSection {
    float: left;
    width: 20%;
}
.navSection:nth-child(odd) {
    background-color: red;
}
.navSection:nth-child(even) {
    background-color: blue;
}

<p class="navSection">Section 1</p>
<p class="navSection">Section 2</p>
<p class="navSection">Section 3</p>
<p class="navSection">Section 4</p>
<p class="navSection">Section 5</p>

CSS Navigation - way without flex

Is this example down below realizable without display: flex; and flex: 1 0 0;?

jsfiddle

1 Answers1

Is this example down below realizable without `display: flex;` and `flex: 1 0 0;`?