Expand a block to fill the page width

Question

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 11-Feb-14 1:52am

Nagy Vilmos

Add a Solution

3 solutions

Solution 2

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

Posted 11-Feb-14 16:18pm

SoMad

Solution 1

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>

Posted 11-Feb-14 2:16am

Ajay J Singh

Updated 11-Feb-14 2:20am

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

JoCodes · Accepted Answer · 2014-02-11T16:38:00

Solution 3

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[^]

Posted 11-Feb-14 16:38pm

JoCodes

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