0

I have this div with 2 tables and one is larger than the other. what I want is for the smaller table to be aligned with the bottom of the div so the bottom line of the small table is adjacent the bottom of the large table. currently the two top lines are adjacent. Thanks.

<div style = "border:1px solid red; width:86;">

  <table id = "small" style = "border:1px solid; float:left;">
    <td style = "font-size:12;">small</td>
  </table>

  <table id = "large" style = "border:1px solid;">
    <td style = "font-size:20;">Large</td>
  </table>

</div>
user2014429
  • 2,497
  • 10
  • 35
  • 49

2 Answers2

1

In this particular case, if the large element is guaranteed to have greater height and the small element to have fixed width, you might be able to hack your way around the issue like this:

div {position: relative;}
#small {position: absolute; bottom: 0; width: 2.7em;}
#large {margin-left: 2.7em;}

http://jsfiddle.net/Aprillion/ZjRyE/

(For general case options see Vertical alignment of elements in a div)

Community
  • 1
  • 1
Aprillion
  • 21,510
  • 5
  • 55
  • 89
0

Try something with the padding bottom of the small table or with the margin of the div.

ArnonZ
  • 3,822
  • 4
  • 32
  • 42
Melki
  • 579
  • 2
  • 5
  • 26