Question

ASP.NET MVC 2 project.

I want to create a master page that has three columns layout. I use table now.

<table>
    <tr>
        <td>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </td>
        <td>
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </td>
        <td>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
        </td>
    </tr>
</table>

Then something like:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Custom Master Demo</h2>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <meta name="description" content="Here are some keywords for our     page description.">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="width: 200px; height: 200px; border: 1px solid #ff0000;">
        <ul>
            <li>Home</li>
            <li>Contact Us</li>
            <li>About Us</li>
        </ul>
    </div>
</asp:Content>
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <div style="width: 200px; height: 200px; border: 1px solid #000000;">
        <b>News</b><br />
        Here is a blurb of text on the right!
    </div>
</asp:Content>

The layout likes:

However it might be stupid by using table, is there a way to implement it with CSS?

Thanks.

Answer 1

Have a look at this: http://matthewjamestaylor.com/blog/perfect-3-column.htm

There are loads of materials online regarding this.