Making page adapt to monitor resolution

aditd · May 9, 2011

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.

un4given[MAD] · May 10, 2011

There are two different conceptual ways to do what you want: with tables or with divs. I can not suggest you which way is right, because 'DIVs vs TABLEs' is one of the highly argued topic among web-designers (try to google "divs vs tables").

So, here is some very simple code, just to give you a clue. It is up to you to decide which way is best suitable for your task.

1) Using TABLE:

Code:

<html>
<head>
<style type="text/css">
html, body {width: 100%; overflow: hidden;}
td.left {width: 80%; vertical-align: top;}
td.right {width: 20%; vertical-align: top;}
</style>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
	<td class="left">Left column content</td>
	<td class="right">Right column content</td>
</tr>
</table>

</body>

</html>

2) Using DIV:

Code:

<html>
<head>
<style type="text/css">
html, body {width: 100%; overflow: hidden;}
#left {width: 80%; float: left;}
#right {width: 20%; float: right;}
</style>
</head>

<body>

<div id="left">Left column content</div>
<div id="right">Right column content</div>

</body>

</html>

And, oh, I almost forgot to say something about full-screen sites. Horizontal resolution of my display is 1920 pixels and it is very hard to read text, placed in such wide content block (even if it will be 80% wide). You should take this in mind when you will design your site.

Please let me know if you have any further questions

DU · May 10, 2011

General Rule.

Use Tables for Tables

Use DIVS (and next SECTIONS) for management of blocks of content.

Agree with un4given[MAD] - I do not like full width sites in general. I hate them if there is text to read.

Making page adapt to monitor resolution

Established Member

Established Member

Secret SantaTop Member

Blaze.Media

88772.xyz

yoksho.com

GoldCoastVilla.com

HomePrestige.com

UriCoin.com

MilMed.com

Rutet.com

XlNote.com

AerialAscent.com

Similar threads

We're social

Blaze.Media

88772.xyz

yoksho.com

GoldCoastVilla.com

HomePrestige.com

UriCoin.com

MilMed.com

Rutet.com

XlNote.com

AerialAscent.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling