html - DIV inline-block not aligning horizontally -
i have 5 columns aligned using display:inline-block
works fine, there 1 problem. when refresh page 4 or 5 times while first column on top other 4 columns go bottom of , when refresh again gets original place. couldn't figure out causing , content inside columns coming database. can give me hint?
css
.col1 { display:inline-block; vertical-align:top; width:225px; } .col2 { display:inline-block; vertical-align:top; width:225px; } .col3 { display:inline-block; vertical-align:top; width:225px; } .col4 { display:inline-block; vertical-align:top; width:225px; } .col5 { display:inline-block; vertical-align:top; width:225px; } .col_content_wrap { background-color:#fff; border:1px solid #ddd; border-radius:5px 5px 5px 5px; box-shadow:4px 4px 1px #eee; margin-bottom:10px; } .imgwrap { height:169px; position:relative; width:223px; } .price_wrap { border-top:1px solid silver; height:50px; } .price { float:right; margin:10px; }
html
<div clas="col1"> <div class="col_content_wrap> <div class="imgwrap">image here <div class="price_wrap"><div class="price"> </div> </div> </div> </div> <div clas="col2"> <div class="col_content_wrap> <div class="imgwrap">image here <div class="price_wrap"><div class="price"> </div> </div> </div> </div> <div clas="col3"> <div class="col_content_wrap> <div class="imgwrap">image here <div class="price_wrap"><div class="price"> </div> </div> </div> </div> <div clas="col4"> <div class="col_content_wrap> <div class="imgwrap">image here <div class="price_wrap"><div class="price"> </div> </div> </div> </div> <div clas="col5"> <div class="col_content_wrap> <div class="imgwrap">image here <div class="price_wrap"><div class="price"> </div> </div> </div> </div>
you missing endquote each of <div class="col_content_wrap>
elements.
also, in each of html blocks, have 5 <div>
's , 4 </div>
's
Comments
Post a Comment