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
clearfloat:right
Comments
Post a Comment