ASP.NET Two column fixed layout, how to fill right column

Question

Yes, another question about fixed layout... I have done much research and applied many solutions but I never find the right one. The problem is simple: I would a web application that fill the client area of the browser. An header, a content area and a footer well fixed on the page and not movable. Obviously the content area has a menu on the right and a variable content on the left... The menu has a fixed widh and I would that the remaing part fill the browser. This is my Master page (ASP.NET):

<body>
    <div id="header" class="header">
        <table class="titleBar" style="border-spacing: 0px;">
            <tbody>
                <tr>
                    <td style="text-align: left; vertical-align: middle; width: 45px; padding-left: 10px">
                        <a class="Logo" align="middle" href="http://www" target="_blank">
                            <img src="../../Images/55.jpg" style="border-bottom-width: 0px;" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
        <div class="navigationMenu">
            <h3><a href="../List/A">A</a></h3>
            <h3><a href="../List/B">B</a></h3>
        </div>
        <div class="itemsList">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
    <div class="footer">
        <div>
            <p>&copy; 2016  - <a href="http://">www</a></p>
        </div>
    </div>
</body>

and this is the CSS

html
{
    height: 100%;
}

body
{
    padding: 0px;
    margin: 0px;
    background: #ffffff;
    font-size: .80em;
    font-family: Roboto, Verdana;
    position: absolute;
    color: #696969;
}

.header
{
    padding: 4px 4px 4px 4px;
    margin: 0px auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 64px;
}

.container
{
    padding: 4px;
    margin: 0px auto;
    width: 100%;
    position: fixed;
    left: 0;
    top: 65px;
    bottom: 33px;
    overflow: auto;
}

.navigationMenu
{
    position: fixed;
    margin: 0px 2px; 
    padding-left: 4px;
    width: 16em; 
    background-color: #CCF;
    top: 65px;
    bottom: 33px;
}

.itemsList
{
    background-color: #FFA;
    position: fixed;
    top: 65px;
    left: 16em;
    margin-left: 8px;
    bottom: 33px;
    overflow: auto;
}

.footer
{
    width: 100%;
    margin: 0px auto;
    position: fixed;
    bottom: 0;
    text-align: center;
    height: 32px;
}

All works fine but the itemsList div that doesn't fill the browser. Can you help me? Any suggestion?

Thank you!

you haven't got anything on the page with a class of "container" so your CSS for that (containing width:100%) is having no effect. I think perhaps you need an extra `
` which wraps navigationMenu and itemsList and that should help. If you want to visualise whether it "fills" the window you might want to add a background colour to it. — ADyson, Oct 05 '16 at 15:12
Thank you. I wrapped the div container but the itemsList doesn't fill to the right of the browser client area. — Old-fashioned-dev, Oct 06 '16 at 09:03
Ok sorry I thought you just wanted the whole container to be 100% width, not that specific div. by default a div only expands to the size of whatever content is in there. So I'd suggest to give itemsList a width as well. Is it supposed to be side-by-side with navigationMenu, or is navigationMenu above it? — ADyson, Oct 06 '16 at 09:59
Yes, it is side-by-side with navigationMenu. So I need a js to calculate and set the width of the itemsList? — Old-fashioned-dev, Oct 06 '16 at 10:17
no, just give each one a % of the width in CSS. Then they'll be in proportion to each other — ADyson, Oct 06 '16 at 10:36

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

It is very poor practice to set up a page layout using a table and table columns. This violates the principle of semantic markup; tables are meant for expressing tabular data, not for creating layout. Also it causes problems with screenreaders and violates guidelines for providing accessibility for those with disabilities.

Instead, you should create the layout using DIV elements, for example like this developer.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 05 '16 at 16:28

John Wu

50,556
8
44
80

all of this is completely true and good general advice, but the OP wasn't using tables except for inside the header, and this doesn't actually provide an answer to the specific problem at hand – ADyson Oct 06 '16 at 07:32

ASP.NET Two column fixed layout, how to fill right column

1 Answers1