Question

It has been a while since I have developed a web site so I am asking for advice.

I am developing using asp.net mvc.

http://www.freeimagehosting.net/t/2jr8r.jpg

The image in the link above is the basic layout for a web site. It is a portal type application. The blue part contains the user details, the black part contains links that when clicked will be displayed in the white part. In the white part I want to be able to trigger pop up windows if needed.

My question is what is the best way to separate the areas (black, blue, white)? Back in the day we would have used frames, what is the accepted way these days?

Thank you for your advice.

Answer 1

Currently most people use div tags. You can make this kind of layout very easily today, here’s a fiddle to play with.

HTML

<div id="page-wrap">
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="sidebar">
            sidebar
        </div>
        <div id="main">
            main content
        </div>
    </div>
</div>​

CSS

#page-wrap {
    width: 960px;
}

#header {
    width: 100%;
    height: 100px;
    background: blue;
}

#content {
    overflow: hidden;
}

#sidebar {
    background: black;
    width: 200px;
    float: left;
    min-height: 400px;
}

#main {
    background: white;
    min-height: 400px;
    width: 760px;
    float: left;
}