html - a part of my div become hidden when i move her to the top -
the issue when try move 3 boxes in second line goes under firs line div's here code :
html :
<!-- first row --> <secction class="rowone"> <div class="col "> <div class="block hours"> 8h00 </div> </div> <div class="col "> <div class="block hours noss"> 8h00 </div> </div> <div class="col "> <div class="block hours noss"> 8h00 </div> </div> <div class="col "> <div class="block hours noss"> 8h00 </div> </div> </secction> <!-- end of first row --> <!-- segend row --> <section class="rowtwoo"> <div class="col "> <div class="block hours"> 8h00 </div> </div> <div class="col pers"> <div class="block hours noss"> 8h00 </div> </div> <div class="col pers"> <div class="block hours noss"> 8h00 </div> </div> <div class="col pers"> <div class="block hours noss"> 8h00 </div> </div> </section> <!-- end of segend row --> css :
.block { border-style: solid; border-color: black; border-width: 1px; vertical-align: center; } .col { float:left; width:150px; } .hours { height:60px; text-align:center; vertical-align:top; font-weight:bold; } .rowtwoo { width: 100%; height: auto; overflow:auto; } .rowone { .noss { height:30px; } } .rowtwoo { .pers { position: relative; bottom:30px; z-index: 9; } } .............................................................................................
in type of situation, have mention
<div class="clear"></div> for every 4th element (in situation, put above code after 4th . add css that,
.clear{clear:both; height:0; overflow:hidden;}
Comments
Post a Comment