CODEWITHSUNDEEP
csshtml
ankit0311
ankit0311

Reputation: 735

Page layout using div tag

I am trying to design a web page which is divided into 3 regions:-

1) a header region 2) a left navigation pane 3) The main content area

For this, I am presently using the following CSS classes:-

    .Content
    {
    position:absolute;
    overflow:auto;
    top:10%;
    left:20%;
    width:80%;
    height:90%;
    }

    .Header
    {
    position:absolute;
    left:0;
    top:0;
    height:10%;
    width:100%;
    background-color:Blue;
    text-align:center;
    }

    .NavPanel
    {
        position:absolute;
        top:10%;
        left:0;
        height:90%;
        width:20%;
        overflow:auto;
        background-color:Menu;
    }

The height and width of body tag are set to 100%.

I dont think this is a very good way of doing what I want to do. For example, when I reduce the height of the browser, the header area reduces proportionally, ultimately vanishing. Also, the page is rendered as expected by Chrome, but for some reason, horizontal scroll bar appears in IE8.

I dont have great knowledge in HTML and CSS, so I just wanted to know if there is any better way of doing this. Thanks!

Upvotes: 0

Views: 1906

Answers (5)

Alfred
Alfred

Reputation: 21386

You may try;

HTML

<div id="container">
    <div id="header">
    </div>
    <div id="sidebar">
    </div>
    <div id="viewer"></div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#header, #sidebar, #viewer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 10%;
    background: yellow
}
#sidebar {
    top: 10%;
    width: 20%;
    bottom: 0;
    background-color: red;
    z-index:100;
}
#viewer {
    top: 10%;
    left: 20%;
    right: 0;
    bottom: 0;
    background-color: green;
}

Here is a live demo.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Here's a basic layout that you can use and expand upon:

http://jsfiddle.net/yUCdb/

Upvotes: 0

user1206604
user1206604

Reputation:

Hi i think you are looking for page layout like this copy and paste this code into any notepad and check it out.

<html>
<head>
    <style type="text/css">


        .Container
        {
        background-color:yellow;
        height:100%;
        weight:100%;
        }

        .inner
        {
        float:left;
        top:10%;
        height:90%;
        width:100%
        }

        .Content
        {
        float:left;
        top:10%;
        left:20%;
        width:80%;
        height:100%;
        background-color:skyblue;
        }

        .Header
        {
        float:left;
        height:10%;
        width:100%;
        background-color:Blue;
        text-align:center;
        }

        .NavPanel
        {
            float:left;
            top:10%;
            height:100%;
            width:20%;
            background-color:Menu;
        }
    </style>
</head>
<body>
    <div class="Container">
        <div class="Header"></div>
            <div class="inner">
                <div class="NavPanel"></div>
                <div class="Content"></div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Ana
Ana

Reputation: 37169

You could try setting a min-height on the header and using media queries.

For example, you could set min-height: 2em; and use a media-query like:

@media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
    .content, .navPanel {
        top: 2em; bottom: 0;
    }
}

DEMO

However, media queries don't work in IE 8 or older.

Upvotes: 1

JohnB
JohnB

Reputation: 13713

You may want to specify an absolute height for the header, e.g.:

.Header 
    { 
    position:absolute; 
    left:0; 
    top:0; 
    height:100px; 
    width:100%; 
    background-color:Blue; 
    text-align:center; 
    }

You can also specify the header in measures of the font size: height: 10em (1 em should be the width of the letter "m"; 1 ex would be the height of the letter "x").

Note that it might be better to remove the "position" attributes both for the header and the content. In this case, positioning would be relative (the default), making the content appear below the header regardless of the size of the header. In that case, remove the "height" attribute for the content.

Upvotes: 1

Related Questions