html - unable to position div at bottom of another div -
am trying position div in bottom of div unable that
<div class="div"> <img src="dual.png"/> <h1>boot cd or usb drive on pc</h1> <div>footers</div> </div>
css
.div{ float:left; height:300px; width:22%; margin-top:15px; margin-left:15px; background-color: #e4f2ff } .div img{ width:100%; height:180px; } .div h1{ font-size:20px } .div div{ background:red; float: bottom; position: absolute; bottom: 0; }
here
jsfiddle
trying make design http://i.stack.imgur.com/cdgky.png can me how position div @ bottom of parent div.. in advance
display:table : http://jsfiddle.net/j1raqvc8/4/
.div { float:left; height:300px; width:22%; margin-top:15px; margin-left:15px; background-color: #e4f2ff; display:table; } .div img { width:100%; height:180px; } .div h1 { font-size:20px; margin:0 } .div div { background:red; display:table-footer-group; }
<div class="div"> <img src="dual.png" /> <h1>boot cd or usb drive on pc</h1> <div>footers</div> </div>
but allow box grow taller 300px if content needs more height http://jsfiddle.net/j1raqvc8/5/ .
Comments
Post a Comment