I have a table with one row and two columns that I used for layout. I want to use css instead, but I’m running into problems.
This is in the master page of an asp.net website. This is a liquid design, the current table takes up the full width of the page.
The right cell has an image, text, and a content place holder. I want this part to be only as wide as it needs to be in order to display these three things on one line. The left cell takes up 100% of the rest of the screen’s width. Both cells are top aligned. The height of the table is determined by the amount of content in the left cell.
This is my original table:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign ="top" width="100%" style="padding:10px; margin-left:40px;">
<asp:Panel ID="PanelAlert" runat="server">
<div class="smallBoxFlat">
<table>
<tr>
<td width="107px">
<asp:AdRotator ID="AdRotator1" runat="server" BorderStyle="None" BorderWidth="0" />
</td>
<td width="100%">
<asp:Label ID="lnkAlert" runat="server" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</td>
<td valign="top" align="right">
<table>
<tr>
<td style="padding-left:5px;">
<img src="/Images/Site/you-are-on-compass-smaller.jpg" align="middle" alt="" />
</td>
<td style="color:#111d81;font-weight:bold;padding-right:75px;" nowrap="nowrap">
You Are On:
<asp:ContentPlaceHolder id="CPH_YAO" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
</table>
Is there a way to do this with css?
What I currently have is this:
<div style="margin-left:60px; margin-top:5px; width:100%;">
<div style="float:right;">
<table>
<tr>
<td style="padding-left:5px;">
<img src="/Images/Site/you-are-on-compass-smaller.jpg" align="middle" alt="" />
</td>
<td style="color:#111d81;font-weight:bold;padding-right:75px;" nowrap="nowrap">
You Are On:
<asp:ContentPlaceHolder id="CPH_YAO" runat="server">
The Test Page
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
<div style="float:left; width:100%;">
<div class="smallBoxFlat">
<table>
<tr>
<td width="107px">
<asp:AdRotator ID="AdRotator1" runat="server" BorderStyle="None" BorderWidth="0" />
</td>
<td width="100%">
<asp:Label ID="lnkAlert" runat="server" />
</td>
</tr>
</table>
</div>
</div>
</div>
This causes the left side to be too wide, and to drop to the next line.
I know I have tables inside tables. I’m rewriting the entire site and taking it one step at a time.