Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

designing flexible page layout

designing flexible page layout

Problem

first see the image prepared in paint.

I want to design a flexible page which will have this type of four division. and hence change in monitor screen or browser size re-sizes window automatically. This all 4 box should fit 100% browser screen and any monitor size and avoiding scroll bar to appear ever. so can any one tell me how to code it in css stylesheet.

here is my code. html:

css:

    *
    {
    margin: 0;
    padding: 0;
    }
    #wrapper
    {
    margin: 0px auto;
    height: 100%;
    width: 100%;
    }
    #bottomleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #topleft
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }
    #topright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: left;
    }
    #bottomright
    {
    position:relative;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    float: right;
    }
Problem courtesy of: D.J.

Solution

Demo

HI now define your body, html height 100%; in css as like this

and define box-sizing in your id

body, html{
height:100%;
}
#bottomleft, #bottomright, #topright, #topleft{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

Demo

Solution courtesy of: Rohit Azad

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

designing flexible page layout

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×