css - 1px divider not fully placed within the container -
i trying create 1px divider between 4 sections in single horizontal bar eg, a, b c , d. have keep top padding = 10px , bottom padding=10 px between each of section , border of horizontal bar. need keep 1px vertical divider between , b. able create top , bottom paddings of 10px , 1 px divider also. 1px line divider not full, means not touching top bar bottom bar. placed on center text placed. can please guide me how extend 1px divider entire length?
code snippet
<div class="top-bar"> <div class="sub-section" > <p style="padding-left: 30px;">vvvvv</p> </div> <div class="sub-section"> <p style="padding-left: 30px;">ysadfafdaafaf</p> </div> <div class="sub-section"> <p style="padding-left: 30px;">werwtrwer rtyryryrytr</p> </div> <div class="sub-section"> <p style="padding-left: 38px;">xsvcsfwr</p> </div> </div> .top-bar{ width:800px; float:left; padding-bottom: 10px; padding-top:10px; } .sub-section{ width:200px; float:left; border-right: 1px solid #ffffff;
}
add box-sizing: border-box
.sub-section class - place border within 200px width , fix layout problem had. ( more info box-sizing property)
.sub-section{ width:200px; float:left; border-right: 1px solid green; -moz-box-sizing: border-box; /* add */ box-sizing: border-box; /* add */ }
Comments
Post a Comment