mccainz mccainz - 3 months ago 8
CSS Question

Trouble positioning div in a two column vertical tabbing structure

I am trying to create a vertical tab control (where the tabs are a vertical stack of buttons on the right side of the container, and the display area is to the left of those buttons. Basically a two column setup.

I can't seem to figure out how to implement this without resorting to absolute positioning (which I'd like to avoid as it seems unnecessary). So, my current solution attempts to implement this by making the divs

inline-block
and specifying their width so that they should fit inside the parent container.

However, as you can see below, the menu div keeps dropping to the next line. Where have I gone wrong and how do I fix this?



<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="script.js"></script>
<style>
.menu.container{
background:#999;
width:150px;
position:relative;
height:75px;
}
.menu.container div:first-child{
width:calc(100% - 25px);
height:100%;
background:red;
display:inline-block;
}
.menu.container div:nth-child(2){
width:25px;
height:75px;
background:#fff;
display:inline-block;
}
.menu.container div:nth-child(2) button{
background:#333;
border:none;
color:#fff;
width:25px;
height:25px;

}
.menu.container div:nth-child(2) button:hover{
background:#666;
cursor:pointer;
}
</style>
</head>

<body>

<div class="menu container">
<div>Some UI here</div>
<div>
<button><i class="fa fa-trash"></i></button>
<button><i class="fa fa-cog"></i></button>
<button><i class="fa fa-info"></i></button>
</div>
</div>

</body>

</html>




Answer

You can accomplish this using flexbox. Just give your .menu.container class a display: flex;.

CSS

.menu.container {
  display: flex;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="script.js"></script>
    <style>
      .menu.container{
        background:#999;
        width:150px;
        position:relative;
        height:75px;
        display: flex;
      }
      .menu.container div:first-child{
        width:calc(100% - 25px);
        height:100%;
        background:red;
        display:inline-block;
      }
      .menu.container div:nth-child(2){
        width:25px;
        height:75px;
        background:#fff;
        display:inline-block;
      }
      .menu.container div:nth-child(2) button{
        background:#333;
        border:none;
        color:#fff;
        width:25px;
        height:25px;
        
      }
      .menu.container div:nth-child(2) button:hover{
        background:#666;
        cursor:pointer;
      }
    </style>
  </head>

  <body>
    
    <div class="menu container">
      <div>Some UI here</div>
      <div>
        <button><i class="fa fa-trash"></i></button>
        <button><i class="fa fa-cog"></i></button>
        <button><i class="fa fa-info"></i></button>
      </div>
    </div>
    
  </body>

</html>