I know there are many variations of this question posted, but none I've found quite provide an answer that works for this case.
I basically have two left floated divs. Inside those two divs are div headers and tabled content.
I want the Div headers (Hour/Minute) to stretch to the
width of the tabled content, but they only do this in FF and Chrome, not IE7. IE7 is my works official browser so the one I need it to work with the most.
Here is the CSS:
#ui-timepicker-div { padding:0.2em; }
#ui-timepicker-hours { float:left; }
#ui-timepicker-minutes { margin:0 0 0 0.2em; float:left; }
.ui-timepicker .ui-timepicker-header { padding:0.2em 0; }
.ui-timepicker .ui-timepicker-title { line-height:1.8em; text-align:center; }
.ui-timepicker table { margin:0.15em 0 0 0; font-size:.9em; border-collapse:collapse; }
.ui-timepicker td { padding:1px; width:2.2em; }
.ui-timepicker th, .ui-timepicker td { border:0; }
.ui-timepicker td a {
display:block;
padding:0.2em 0.3em 0.2em 0.5em;
text-align:right;
text-decoration:none;
}
Here is the HTML (did not include tabled content):
<div style="position: absolute; top: 252.667px; left: 648px; z-index: 1; display: none;" class="ui-timepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-timepicker-div">
<div id="ui-timepicker-hours">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Hour</div>
</div>
<table class="ui-timepicker">
</table>
</div>
<div id="ui-timepicker-minutes">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Minutes</div>
</div>
<table class="ui-timepicker">
</table>
</div>
</div>
