Need help with vertical-align

[HDFilmMaker2112]

I need help making specs_text centered vertically compared to specs_entry:

 

If you have javascript turned on:

http://ghosthuntersportal.com/store.php?product=1#specifications

 

If javascript turned off:

http://ghosthuntersportal.com/store.php?product=1&get=specifications

 

.specs_header{
font-size: 16px;
font-weight: bold;
background-color: #660066;
padding: 5px;
padding-bottom: 0px;
width: 720px;
margin-top: 15px;
}

.specs_text_spacer{
margin-left: 5px;
display: inline-block;
}

.specs_wrapper{
border-bottom: 2px;
border-left: 0px;
border-right: 0px;
border-color: #660066;
border-style: solid;
border-collapse: collapse;
width: 730px;
overflow:auto;
}

.specs_text{
font-size: 14px;
font-weight: bold;
float: left;
border: 0px;
border-color: #660066;
border-style: solid;
border-collapse: collapse;
width: 245px;
padding: 5px;
}

.specs_entry{
font-size: 14px;
float: left;
border: 0px;
border-left: 2px;
border-color: #660066;
border-style: solid;
border-collapse: collapse;
width: 460px;
padding: 5px;
}

 

$product_specifications=str_replace("[[","<div class=\"specs_header\"><span class=\"specs_text_spacer\">", $product_specifications);
$product_specifications=str_replace("]]","</span></div>", $product_specifications);
$product_specifications=str_replace("[","<div class=\"specs_wrapper\"><div class=\"specs_text\"><span class=\"specs_text_spacer\">", $product_specifications);
$product_specifications=str_replace("|","</span></div><div class=\"specs_entry\"><span class=\"specs_text_spacer\">", $product_specifications);
$product_specifications=str_replace("]","</span></div></div>", $product_specifications);
$product_specifications=str_replace("<>","<br />", $product_specifications);

 

The issue it seems with using vertical-align: middle; is that the specs_text is not the same height as specs_entry.

[cssfreakie]

I hope I understand you right, but i think you meant: http://ghosthuntersportal.com/store.php?product=1#specifications

And if that is the case and you mean to vertical align <span class="specs_text_spacer">Frequency Range</span> in the middle of that div vertical align can't do that. (huh what? indeed it can't although lots of people think it can because of the name.)

 

 

just to show what i mean this is what the manual says.

'vertical-align'

    Value:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

    Initial:  baseline

  Applies to:  inline-level and 'table-cell' elements

    Inherited:  no

    Percentages:  refer to the 'line-height' of the element itself

    Media:  visual

    Computed value:  for <percentage> and <length> the absolute length, otherwise as specified

 

Another problem with this set-up is that the height of the left div will never increase in size when the content at the right increases.

Normally a small trick to vertical align text is to give it the same line-height as the height of the box, but in this case that would not work because there are 2 independent divs. In this case the easiest way to do this is to use a table. both boxes than have something in common, which is a row height. In that case you can use vertical align middle.