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 :
.bg { background-color: #fff; min-height:150px; } .sidebar { padding-top: 40px; width:31%; margin-left:2.3333%; }
Comments
Post a Comment