Making page adapt to monitor resolution

**couponsitescript** · September 24th, 2011, 05:22

I have a to make web page containing 2 columns. This is done.
Now what I would like to insert in the code is something like this:
The 2 columns should be full screen on any resolutions. Something like the page would adapt to the monitor resolution.
The percent would be 80% for the first column 20% for the second one.

What I don't know - is how to do that. Would a table resolve this problem?
What would be the code for this?

Suggestion are well appreciated.

**TehGuy** · September 25th, 2011, 20:07

You could use a table, but that's kinda gone the way of the dinosaur as far as web developers are concerned. Using div layouts with CSS is the standard nowadays. It's more flexible, but a little harder to wrap your head around. The basic layout for something like what you're describing would look like this:

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head>
    <body>
        <div id="container">
            <div id="leftCol"></div>
            <div id="rightCol"></div>
        </div>
    </body>
</html>

CSS:

Code:

body{
    margin:0;
    padding:0;
}

div{
    border: 1px solid black;
}

#leftCol{
    float:left;
    width:80%;
    background-color:white;
}

#rightCol{
    float:left;
    background-color:lightgrey;
    width:19%;
}

#container
{
    float:left;
}

All of that is gonna output something that has the columns you're talking about, but isn't the prettiest:

http://i179.photobucket.com/albums/w...-650/wrong.png

You can see the borders are weird, the background colors don't match up where you'd want them to, and there's no padding on the divs with content. So in the next bit of CSS, I took 5% off the width of the left and right columns (though you could do this proportionally if you want, like 8% 2%), added in 3px padding to both columns (you can do percentages here if you want), and changed the background color of the container to the color of the right column. Lastly, I gave the container a minimum width, because you probably don't want your page to be squished down to a 50px wide box.

New CSS:

Code:

body{
    margin:0;
    padding:0;
}

#leftCol, #rightCol{
    padding: 3px;
}

#leftCol{
    float:left;
    width:75%;
    background-color:white;
    border-right:2px solid black;
}

#rightCol{
    float:left;
    background-color:lightgrey;
    width:15%;
}

#container{
    border:2px solid black;
    min-width:800px;
    float:left;
    background-color:lightgrey;
}

The output looks like this:

http://i179.photobucket.com/albums/w...-650/right.png

When modifying this, keep in mind that the width of your two columns need to actually add up to less than 100%. Borders and padding aren't included in that, and they are usually not percentage based, so you need to give your container a little lee-way so it can fit both the columns in the same row.