Making page adapt to monitor resolution

aditd · 05-09-2011, 01:18 PM

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] · 05-10-2011, 07:49 AM

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

defaultuser · 05-10-2011, 08:11 AM

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.

05-09-2011, 01:18 PM	THREAD STARTER #1 (permalink)
aditd NamePros Member Join Date: Aug 2006 Posts: 95	Making page adapt to monitor resolution 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. __________________ Coupon Site Script - Turnkey Affiliate Moneymaking Business Code Coupon Discount - Coupon Site Script in Action

05-10-2011, 07:49 AM	#2 (permalink)
un4given[MAD] NamePros Member Join Date: Aug 2008 Location: Solar System \ Earth \ Ukraine \ Kiev Posts: 43	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 __________________ Tired playing Freecell, Klondike or Spider? Discover 800 solitaire games at SolitairesUnlimited.com and play'em all!

05-10-2011, 08:11 AM	#3 (permalink)
defaultuser Senior Member Join Date: May 2009 Location: internet@ctivist.com Posts: 4,790	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. __________________ A Member of: IdeationTeam.com HowToBeADomainer.com - a Domaining How To AuthorEditor.com

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Facebook Fan Page Likes Service	Virgo.seo	For Sale / Advertising Board	4	05-10-2011 04:32 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)