html - Expand div according to the inner text -


i've got following div elements in html. act buttons.

  <div id="button-section">     <!-- section function buttons -->       <div class="fn-button">       <!-- function button -->         <span>my current checks</span>       </div>       <div class="fn-button">       <!-- function button -->         <span>all current checks</span>       </div>       <div class="fn-button">       <!-- function button -->         <span>add new order</span>       </div>   </div> 

this css i've used there elements.

 #button-section{ width: 100%; height: 150px; position: fixed; bottom: 0; background-color: rgb(229, 229, 255);  }   .fn-button{ width: 130px; height: 50px; float: left; margin: 10px 0px 0px 20px; border-radius: 10px; background: rgb(111, 111, 111); box-shadow: inset 1px 4px 12px rgb(0, 0, 0); text-align: center;  }   .fn-button span{ padding: 0px; margin: 0px 0px 0px 0px; color: white; vertical-align: -17px; font-size: 20px;  } 

the thing is, need adjust width according text inside each div element.! either have define width each element or find method. below image display situation of divs.

display error

how can dynamically expand divs according inner text?

remove width rule divs (width: 130px).

this ends looking little scrunched, can fix padding

padding-left: 5px; padding-right: 5px; 

http://jsfiddle.net/explosionpills/zxn6c/


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -