Databases
StackOverflow2013
Postsdbo
POCan't get two divs next to each other
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't get two divs next to each other
    text
    copied!<p>I can get two divs next to each other using <code>display: inline-block;</code> 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...</p> <p>If I use floats like so:</p> <pre><code>&lt;div style="width:100%"&gt; &lt;div style="width:25%; float:left;"&gt; &lt;asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture."&gt; &lt;asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" /&gt; &lt;/asp:HyperLink&gt; &lt;/div&gt; &lt;div style="width:75%; float:right;"&gt; &lt;table style="width:100%"&gt; &lt;tr&gt; &lt;td&gt; &lt;h2 style="display:inline;"&gt;&lt;asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group."&gt;[hlCGValue]&lt;/asp:HyperLink&gt;&lt;/h2&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;h3 style="display: inline;"&gt; &lt;asp:Label ID="lblCompanyNameValue" runat="server"&gt;&lt;/asp:Label&gt;&lt;/h3&gt; &lt;asp:Label ID="lblCompanyID" runat="server" Visible="False"&gt;&lt;/asp:Label&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank"&gt;[hlWebsiteValue]&lt;/asp:HyperLink&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:Label ID="lblAssignedToValue" runat="server"&gt;&lt;/asp:Label&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I get the following layout:</p> <p><img src="https://i.stack.imgur.com/iFKMS.png" alt="enter image description here"></p> <p>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.</p> <p>Can anyone help me with my CSS / HTML to make this look right...</p> <h2>Rendered html</h2> <pre><code>&lt;div style="width:100%"&gt; &lt;div style="width:25%; float:left;"&gt; &lt;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"&gt;&lt;img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div style="width:75%; float:right;"&gt; &lt;table style="width:100%"&gt; &lt;tr&gt; &lt;td&gt; &lt;h2 style="display:inline;"&gt;&lt;a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39"&gt;Ford&lt;/a&gt;&lt;/h2&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;h3 style="display: inline;"&gt; &lt;span id="MainContent_lblCompanyNameValue"&gt;Ford Global Test Co.&lt;/span&gt;&lt;/h3&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank"&gt;www.ford.com&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;span id="MainContent_lblAssignedToValue"&gt;Name&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload