Separate sidebar from image

• Eficcia
• Rapidez
• Impacto
  na vida real
• Tecnologia
  avanada
• Segurana

Answer by 4dgaurav for Separate sidebar from image

Updated demo according to comments understanding below DEMO 2

DEMO 1

css changes

.menuleft {    background-color: #CDD0D2;    list-style-type: none;    /*position: absolute;*/    width: 9%;    height: 100%;    /*display: table;*/    float: left; /* float to left */  }    .menuleft ul {    /*display: table-cell;*/ /* remove this */    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    vertical-align: middle;  }    .menuleft li a {    font-family: Futura LT, 'Trebuchet MS', Arial;    letter-spacing: 0.28vw;    color: #fff;    text-decoration: none;    /*height: 100%;*/    text-align: center;    display: flex;    vertical-align: middle;    align-items: center;    justify-content: center;    width: 100%;    writing-mode: tb-rl;    -webkit-transform: rotate(180deg);    -moz-transform: rotate(180deg);    -o-transform: rotate(180deg);    -ms-transform: rotate(180deg);    transform: rotate(180deg);    white-space: nowrap;  }    .image {    width: 91%; /* remaining space */    height: 100%;    float: right; /* add this to float it to right */  }  

Answer by Joao Alves Marrucho for Separate sidebar from image

Try this on your css:

body{  text-decoration: none;  margin: 0 auto;  max-width:100% !important;  height:auto;}    .fundo img{  max-width:100% !important;  height:auto;}    .menuleft {  background-color: #CDD0D2;  list-style-type: none;  position: relative;  width: 9%;  height: 100%;  display:inline-block;  }    .menuleft ul{  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  vertical-align: middle;  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%);  }    #text {  -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);  -moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);  box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);  width: 100%;  height: 17%;  color: white;  text-align: center;  text-decoration: none;  background-color: #F06D22;  }    .menuleft li a {  font-family: Futura LT,'Trebuchet MS', Arial;  letter-spacing: 0.28vw;  color: #fff;  text-decoration: none;  height: 100%;  text-align: center;  display: flex;  vertical-align: middle;  align-items: center;  justify-content: center;  width: 100%;  writing-mode: tb-rl;  -webkit-transform:rotate(180deg);  -moz-transform:rotate(180deg);  -o-transform: rotate(180deg);  -ms-transform:rotate(180deg);  transform: rotate(180deg);  white-space:nowrap;  }    .menuleft li:hover {  text-decoration: none;  background: rgba(255,255,255,0.2);  }    .menuleft li a:hover {  text-decoration: none;  color: #fff;  }    #whitebar{  text-decoration: none;  display: table;  width: 100%;  height: 3px;  background-color: #fff;  writing-mode:tb-rl;  -webkit-transform:rotate(90deg);  -moz-transform:rotate(90deg);  -o-transform: rotate(90deg);  -ms-transform:rotate(90deg);  transform: rotate(180deg);  white-space:nowrap;  bottom:0;  margin: 0 auto;  }    .image {  width: 90%;  height:100%;  display:inline-block;  }    .image img {  width: 100%;  height: 100%;  }  

Answer by Jo?o Guerreiro for Separate sidebar from image

body{      text-decoration: none;      margin: 0 auto;      max-width:100% !important;      height:auto;  }    .fundo img{      max-width:100% !important;      height:auto;  }      .menuleft {      background-color: #CDD0D2;      list-style-type: none;      position: absolute;      width: 9%;      height: 100%;      display: table;  }  .menuleft ul{      display: table-cell;      list-style-type: none;      margin: 0;      padding: 0;      overflow: hidden;      vertical-align: middle;  }  .text {      -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);  -moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);  box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22);      width: 100%;      height: 17%;      color: white;      text-align: center;      text-decoration: none;      background-color: #F06D22;  }    .menuleft li a {      font-family: Futura LT,'Trebuchet MS', Arial;      letter-spacing: 0.28vw;      color: #fff;      text-decoration: none;      height: 100%;      text-align: center;      display: flex;      vertical-align: middle;      align-items: center;      justify-content: center;      width: 100%;      writing-mode: tb-rl;      -webkit-transform:rotate(180deg);      -moz-transform:rotate(180deg);      -o-transform: rotate(180deg);      -ms-transform:rotate(180deg);      transform: rotate(180deg);      white-space:nowrap;  }    .menuleft li:hover {      text-decoration: none;      background: rgba(255,255,255,0.2);  }  .menuleft li a:hover {      text-decoration: none;      color: #fff;  }    .whitebar{      text-decoration: none;      display: table;      width: 100%;      height: 3px;      background-color: #fff;      writing-mode:tb-rl;      -webkit-transform:rotate(90deg);      -moz-transform:rotate(90deg);      -o-transform: rotate(90deg);      -ms-transform:rotate(90deg);      transform: rotate(180deg);      white-space:nowrap;      bottom:0;      margin: 0 auto;  }    .image {      list-style-type: none;      padding: 0;      top: 0;      bottom: 0;      left: 0;      right: 0;      margin: auto auto auto 9%;  }  .image img {      width: 100%;      height: 100%;  }

          
              
                  
                      Eficcia                  
                  
                  
                  
                      Rapidez                  
                  
                  
                  
                      Impacto 
 na vida real                  
                  
                  
                  
                      Tecnologia 
 avanada                  
                  
                  
                  
                      Segurana