Manipulating the height of a div class in an HTML table using CSS and a wicket

Question

I have the following CSS code:

.Divider {

padding-top:0px;
padding-bottom:500px;
}

and the following HTML

<tr>
<td align="left">
<a wicket:id="button">      
    <img wicket:id="buttonImg" align="center" style="width:70%"/>
</a>
</td>
<td align="left" >
<div class="Divider"/>
</td>
</tr>

I would have expected 500px to be added as padding at the bottom of the image. Instead it adds it top and bottom. I've tried fiddling with height - same result. Obviously I'm a stupid newbie but can anone give me a clue what form my stupidity is taking pls. Would be most grateful

Answer 1

Try closing the Divider div this way.

<div class="Divider"></div>

Original Code Example <div class="Divider" /> http://jsfiddle.net/rrBXU/1/
Example with <div class="Divider"></div> http://jsfiddle.net/rrBXU/2/

Answer 2

You should be applying the padding to the same cell that the image is in.

You can do it with the <div> or apply the padding-bottom property to the <img> .

<table>
  <tr>
    <td align="left">
      <a wicket:id="button">
        <img id="buttonImg" align="center" style="width:70%"></a>
        <div class="Divider"></div>
    </td>
  </tr>
</table>

Also, if you give the containing table a class you'll have greater control over all elements within it by using CSS. Example:

<table class="container">
  <tr>
    <td>
      <a><img src="..."></a>
    </td>
  </tr>
</table>

.container { }
.container td { }
.container td img { } 

Answer 3

You can put the img tag in a div and give it the same style.Or to make it easier just add a new div with the "Divider" class and put the image in it. The code will be like this:

<td>
  <div class="Divider">
    ..image or other content..
  </div>
</td>

If there are other styling attributes in Divider:

<td>
  <div class="Divider2" style="padding-top:0px;padding-bottom:500px;">
    ..image or other content..
  </div>
</td>