html - Create a margin between two columns without effecting grid layout -


in body of page have split 12 columns body 8 columns wide , sidebar 4 columns wide. these 2 areas different colour background, want them appear if on top of background. problem when set margin between 2 areas in order make them appear 2 separate areas effects layout of website have 8 columns, 4 columns , margin, sidebar pushed below content. how add in margin separate 2 areas without destroying bootstrap's grid layout?

edit: know nest them , add in column between 2 areas, want margin of 15px between 2 areas.

code:

<div class="container">     <div class="row">         <div id="content" class="main-content-inner col-sm-12 col-md-8 bg">         </div>         <div class="sidebar col-sm-12 col-md-4 bg">         </div>     </div> </div>  .bg {     background-color: #fff; }  .sidebar {     padding-top: 40px;     border-left: 15px solid transparent; } 

you can change width of sidebar , add margin-left :

demo

.bg {     background-color: #fff;     min-height:150px; }  .sidebar {     padding-top: 40px;     width:31%;     margin-left:2.3333%; } 

Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -