Set background color to one side of centered div - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Set background color to one side of centered div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <body translate="no"> 
  <style>

.wrapper {<!--  w w  w .  j ava  2  s.  co m-->
   display: flex;
   width: 100%;
   justify-content: center;
}
.centered {
   margin: 0;
   background-color: white;
   flex: 1;
}
.left-red {
   margin: 0;
   background-color: red;
   width: 15%;
}
.right {
   margin: 0;
   background-color: gray;
   width: 15%;
}


      </style> 
  <div class="wrapper"> 
   <div class="left-red"> 
   </div> 
   <div class="centered"> 
    <div>
      Some menu... 
    </div> 
   </div> 
   <div class="right"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials