html - CSS: Bad text alignment when overflow is applied -
the problem when want display div content not showing correctly, seems alignment not working. can me fix issue? current css snippet this.
html
<section id="32" class="products" name="4" company="1"> <div class="product-header-container"> <div class="title-product"> <input id="32" type="checkbox" tax="0" value="1248" rangepricing="0" ordernumber="56" name="basic" checked > <span class="title-product-value"> u.s. maintenance plan </span> </div> <div class="price-product"> <span class="price-product-value">$1,248.00</span> </div> <div class="description-product" hidden>pays regular maintenance</div> <div class="displayname-product">pays regular maintenance</div> </div> <li class="bulletpoint">oil & filter replacement</li> <li class="bulletpoint">tire rotation</li> <li class="bulletpoint">fuel injection</li> <li class="bulletpoint">breake pads , rental car allowance</li> <li class="bulletpoint">service</li> <div class="icons-products"> <a style="padding-right:5px;" id="modal1" class="linkmodal1 usingwebservice"data-toggle="modal" data-target="#mymodal1" ><i class="fa fa-cog" title="options"></i></a> <a style="padding-right:5px;" id="modal2" class="linkmodal2"data-toggle="modal" data-target="#mymodal2" ><i class="fa fa-file-text-o" title="brochure"></i></a> </div> </section>
css
.title-product { color: #41699a; font-weight: bold; float: left; font-size: 11px; width: 70%; display: inline-block; } .price-product { float: right; overflow: auto; font-size: 11px; margin-top:5px; padding-left: 0px; text-align: right; } .price-product-value { width: 45px; text-align: right; }
thanks
have tried remove width .price-product-value
? have fixed width , prices may overflow it, if have overflow:auto
, show scroll bars. can try change overflow:hidden
.
Comments
Post a Comment