Can't get two divs next to each other - html

Question

I can get two divs next to each other using display: inline-block; in the style attribute, but then the div on the right side is aligned on the bottom rather than at the top. So I tried floating the divs and I get another issue...
If I use floats like so:
<div style="width:100%">
<div style="width:25%; float:left;">
<asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture.">
<asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" />
</asp:HyperLink>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group.">[hlCGValue]</asp:HyperLink></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<asp:Label ID="lblCompanyNameValue" runat="server"></asp:Label></h3>
<asp:Label ID="lblCompanyID" runat="server" Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank">[hlWebsiteValue]</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAssignedToValue" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
I get the following layout:
Notice the table with text is so far away from the picture...I'd like to move it right next to the picture. I tried doing it using display: inline-block but then the table of data would be next to the picture however it would sit at the bottom of the div rather then at the top (probably due to the size of the pic). If it helps the max size of the picture should only be 256px x 256px.
Can anyone help me with my CSS / HTML to make this look right...
Rendered html
<div style="width:100%">
<div style="width:25%; float:left;">
<a id="MainContent_hlPic" title="Click to open this picture." href="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" target="_blank"><img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /></a>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39">Ford</a></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<span id="MainContent_lblCompanyNameValue">Ford Global Test Co.</span></h3>
</td>
</tr>
<tr>
<td>
<a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank">www.ford.com</a>
</td>
</tr>
<tr>
<td>
<span id="MainContent_lblAssignedToValue">Name</span>
</td>
</tr>
</table>
</div>
</div>

Answer 1

You can use display: inline-block. When you want them aligned at the top, you must use vertical-align: top
<div>
<div id="#first">
<!-- image -->
</div>
<div id="second">
<!-- table -->
</div>
</div>
#first, #second {
display: inline-block;
vertical-align: top;
}
JSFiddle

Answer 2

The problem with display: inline-block is that the whitespace between your two div elements is NOT ignored. The result is that the width of your 2 divs + the width of the whitespace is more than 100%. That's why the second div appears under the first one.
One way to fix this is to set font-size: 0 on the parent element, but there are other solutions:
http://davidwalsh.name/remove-whitespace-inline-block