Need help converting a table

HTML & CSS
1

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&nbsp;Are&nbsp;On:&nbsp;&nbsp;
                                <asp:ContentPlaceHolder id="CPH_YAO" runat="server">
                                    &nbsp;
                                </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&nbsp;Are&nbsp;On:&nbsp;&nbsp;
                        <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.

2

I’d really need to see the complete design and know the dynamics to do this properly but it sounds like you want something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#outer {
    overflow:hidden;
    width:100%;
    background:red
}
#sidebar {
    float:right;
    background:red;
    padding:10px;
}
#main {
    overflow:hidden;
    background:blue;
    padding:10px;
    zoom:1.0;
}
img.test {
    display:inline-block;
    width:50px;
    height:50px;
    vertical-align:top;
    margin:0 10px 0 0;
    background:green
}
</style>
</head>
<body>
<div id="outer">
    <div id="sidebar">
        <p><img class="test"src="" alt="" /> You are on the test page</p>
    </div>
    <div id="main">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan.</p>
        <p>Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    </div>
</div>
</body>
</html>