Absant

Hi!

Im trying to design a view with 2 boxes : on the left 1 menu and in the right the main box.

The menu should be vertical and relative, and with the main box I can do what I want.

The problem is that this 2 boxes should fill all the space horizontally and vertically. But all the time that I change the width or the "position" I have 2 results:

1. Part of the main box is hidden with the menu box
2. The two boxes dont fill the space

This is the css code of my boxes:

.main-box{

    background-color: #FFFFFF;
    font-size: 14px;
    color: #34495E;
    height:99%;

    min-width: 150px;
    line-height: 1.231;
    width: 94%;
    margin-left: 10%;
    margin-right: 0.5%;
    float: right;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);

}

.menu{

          position: fixed;
          left: 0;
          top: 0;
          bottom: 0;
          height: 100%;
          width: 7em;
          background-color: #333;
    

}

And this is the result. How can I solve it?

Thanks!