Trouble positioning div in a two column vertical tabbing structure

Question

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>

score 1 · Accepted Answer · answered Aug 17 '16 at 16:12

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>

Works great (actually used inline-flex but exact same concept), checked browser support and as IE8 is not supported by the product so your answer works wonderfully. — mccainz, Aug 17 '16 at 16:21

score 1 · Answer 2 · answered Aug 17 '16 at 16:16

1

As an alternative to the flexbox technique you can add float: left to your red container block. Don't forget to add the clearfix to the main container.

Modified example, line 25: http://jsbin.com/gulemovoci/1/edit?html,output

answered Aug 17 '16 at 16:16

Remi Weiss

62
5

score 1 · Answer 3 · answered Aug 17 '16 at 16:18

check this out!

Added float: left to both the container children. Also added

 <div style="clear:both"></div>

for clearing the float. Let me know your feedback on this. Thanks!

<!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;
        float: left;
      }
      .menu.container div:nth-child(2){
        width:25px;
        height:75px;
        background:#fff;
        display:inline-block;
        float: left;
      }
      .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 style="clear:both"></div>
    </div>
    
  </body>

</html>

Trouble positioning div in a two column vertical tabbing structure

3 Answers3