html - Why are these two divs not acting as block? -


i want these 2 div tags on top of each other. have defined both of them inline blocks because need give them properties float, padding, border. after defining both div tags inline-block both of them partially on same line. appreciated :)!

 <div id="legend" style="border:1px solid black; max-width:75%; float:right; display:inline-block;">      <table style="padding: 2px;">         <tr>             <td><span  style="color:red; font-weight: bold;">*</span></td>             <td>some text goes here.</td>         </tr>         <tr>             <td><span  style="color:red; font-weight: bold;">**</span></td>             <td>some text goes here again</td>         </tr>         <tr>             <td><span  style="color:red; font-weight: bold;">**</span></td>             <td>yup..some other text goes here again.dfdsfdsfsf</td>         </tr>     </table> </div> <br/> <br/> <div id="backtosearch"style = "display:inline-block;">     <button id="btnbacktosearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> <span data-bind="text: backbuttontext"></span></button> </div> 

try:

<div id="legend" style="border:1px solid black; max-width:75%; float:right;">     <table style="padding: 2px;">         <tr>             <td><span style="color:red; font-weight: bold;">*</span>             </td>             <td>some text goes here.</td>         </tr>         <tr>             <td><span style="color:red; font-weight: bold;">**</span>             </td>             <td>some text goes here again</td>         </tr>         <tr>             <td><span style="color:red; font-weight: bold;">**</span>             </td>             <td>yup..some other text goes here again.dfdsfdsfsf</td>         </tr>     </table> </div> <div style="clear:both"></div> <div id="backtosearch">     <button id="btnbacktosearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> <span data-bind="text: backbuttontext"></span>     </button> </div> 

https://jsfiddle.net/cj1s9q0g/

changes:

  • remove display:inline-block div block default , block on top of each other.
  • add div clear:both clear float:right

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -