Click here to Skip to main content
15,849,030 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to get a Master page for a project, the idea is there will be a top banner, three columns down the page and a footer. The middle of the three columns should expand so the page is filled, something like:
+------------------------------+
|           HEADER             |
+---+----------------------+---+
| m |   this will be       |   |
| e |   expanded to        | i |
| n |   fill the page      | n |
| u |                      | f |
|   | <---            ---> | o |
+---+----------------------+---+
|           footer             |
+------------------------------+


My master page's body is like this:
ASP.NET
<body>
    <form id="masterPage"  runat="server">
        <div id="container">
            <div>
                <asp:ContentPlaceHolder ID="title" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div style="background-color: #FFD700; width: 100px; float: left;">
                <asp:ContentPlaceHolder ID="menu" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <!-- This block is the one that must comply or die a painful death! -->
            <div style="float: left;">
                <asp:ContentPlaceHolder ID="content" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div style="width: 100px; float: left;">
                <asp:ContentPlaceHolder ID="related" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div id="footer" style="clear: both; text-align: center;">
                <small>Copyright © Vilmos - 2014</small>
            </div>
        </div>
    </form>
</body>


My formatting wizzardness is lacking, so go ahead and tell me where I fuped.

ps. No, I don't want to use a <table>.
Posted

I am not exactly sure if this is what you are looking for either, but I think it is close as I am keeping the side bars at a fixed width.

- Set float: right for the right side bar.
- Set width: auto for the center panel.
- Set whichever overflow[^] behavior you want for the center.
- I would also set width: 100% for the container div, but I guess it is not really necessary.
ASP.NET
<body>
    <form id="masterPage" runat="server">
        <div id="container">
            <div>
                <asp:contentplaceholder id="title" runat="server" xmlns:asp="#unknown">
                </asp:contentplaceholder>
            </div>
            <div style="background-color: #FFD700; width: 100px; float: left;">
                <asp:contentplaceholder id="menu" runat="server" xmlns:asp="#unknown">
                </asp:contentplaceholder>
            </div>
            <!-- This block is the one that must comply or die a painful death! -->
            <div style="width: auto; float: left;">
                <asp:contentplaceholder id="content" runat="server" xmlns:asp="#unknown">
                </asp:contentplaceholder>
            </div>
            <div style="width: 100px; float: right;">
                <asp:contentplaceholder id="related" runat="server" xmlns:asp="#unknown">
                </asp:contentplaceholder>
            </div>
            <div id="footer" style="clear: both; text-align: center;">
                <small>Copyright © Vilmos - 2014</small>
            </div>
        </div>
    </form>
</body>

Soren Madsen
 
Share this answer
 
Have a look at the link , Its the Holy Grail layout you are looking for.

http://alistapart.com/article/holygrail[^]

http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html[^]
 
Share this answer
 
Comments
SoMad 12-Feb-14 6:36am    
Those are nice links. :thumbsup: I will have to bookmark them for a rainy day.

Soren Madsen
JoCodes 12-Feb-14 8:40am    
Thanks Soren
use percentage instead of pixel while assigning width.

note that the width of page is 100%

example:
<div style="width:15%"></div>
<div style="width:70%"></div>
<div style="width:15%"></div>
 
Share this answer
 
v2
Comments
Nagy Vilmos 11-Feb-14 8:24am    
Not really what I'm after, the two side bars could be percentage, but I really wanted to have them fixed width.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900