html - How to get an inner div to fill the entire wrapper div? -
i have following html code:
<div class="outer ui-draggable" style="position: relative;"> <div class="inner">foo bar</div> </div>
with css:
.outer { background-color: #f7f085; margin: 5px; height: 100px; width: 150px; text-align:center; vertical-align:text-bottom; } .outer .inner { display:inline; vertical-align:middle; height: 100px; width: 150px; }
i inner div fill outer div - text block should entire 100x150 box.
the problem code doesn't produce desired effect. outer div indeed correct size, inner div seems fill small area @ top of outer div.
i tried using height:inherit , width:inherit instead of specifying size.
the problem display:inline
style. if want behave normal div, keep display:block
. if it's display:inline
tall inherited line-height.
Comments
Post a Comment