How can I achieve this:
<table border="0">
<tbody>
<tr>
<td style="margin-right:5px;">
<h2 id="optiona" class="option optiona optiona2">a. aa </h2>
</td>
<td style="margin-right:5px;">
<h2 id="optionb" class="option optionb optionb2">b. a </h2>
</td>
</tr>
<tr>
<td style="margin-left:5px;">
<h2 id="optionc" class="option optionc optionc2">c. aa </h2>
</td>
<td style="margin-left:5px;">
<h2 id="optiond" class="option optiond optiond2">d. </h2>
</td>
</tr>
</tbody>
</table>
Using something like this (and CSS):
<h2 style="display:inline;" id="optiona" class="option optiona optiona1">a. a </h2>
<h2 style="display:inline;" id="optionb" class="option optionb optionb1">b. aaa </h2>
<br />
<h2 style="display:inline;" id="optionc" class="option optionc optionc1">c. aaa </h2>
<h2 style="display:inline;" id="optiond" class="option optiond optiond1">d. aa </h2>
I am also open to options with JavaScript and/or jQuery
P.S. I have zero control over the content and they might be rather lengthy (if tehy’re too long, I need them to wrap, but I think that happens automatically) so no fixed widths.
In a table if that longest cell in a column is say 200px wide, the entire column will be 200px, how would I do this with just html and css? Basically need the for h2 elements to line up like this:
a.aaaaa b.a
c.a d.aaa
You could use the
displayproperties that imitate tables. Not sure they work on older browsers, though.http://ecommercedeveloper.com/articles/1941-css-display-table-display-table-row-and-display-table-cell/
http://ajaxian.com/archives/display-table
Compatibility:
http://caniuse.com/css-table