Topic: Making page adapt to monitor resolution (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=32425" title="Pages that link to Topic: Making page adapt to monitor resolution (Page 1 of 1)" rel="nofollow" >Topic: Making page adapt to monitor resolution <span class="small">(Page 1 of 1)</span>\$

aditd Obsessive-Compulsive (I) Inmate From: Insane since: Sep 2011	posted 11-01-2011 02:50 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
Tommmie Obsessive-Compulsive (I) Inmate From: Here Insane since: Nov 2011	posted 11-01-2011 21:19 You already give the answer in your post. Use percentages for size. Tables are evil. So unless you need to show tabular data do not use them. Use HTML and CSS instead. Your html code would be something like this. code: [Doctype declaration] <html> <head> <title> 2 column page </title> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> <body> <div id="container"> <div id="column1"> <!-- Content of column1 goes here --> Column1 </div> <div id="column2"> <!-- Content of column2 goes here --> Column2 </div> </div> <!-- End of Container div --> </body> </html> Create a css file (theme.css) an put something like this in it. code: /* theme.css / html, body, #container { margin:0; padding:0; / reset padding and margin to Zero to avoid problems / width: 100%; } #column1 { width: 19%; background-color: white; float: left} #column2 { width: 79% ; background-color:black; float:left } /end of file */ As you can see both columns are missing 1% in size, this way there will always be a small gutter even when you don't declare it. (Edited by Tommmie on 11-01-2011 21:27)
KARN Bipolar (III) Inmate From: Vancouver, BC Insane since: Apr 2001	posted 05-22-2012 20:47 I'm not sure if the gutters' is completely necessary, but tables are definitely not. 80% + 20% divs should work, but do not apply your margins, padding and etc to these divs. Create additional divs inside if you need styling. Portfolio \| Tweet Me

Topic: Making page adapt to monitor resolution (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=32425" title="Pages that link to Topic: Making page adapt to monitor resolution (Page 1 of 1)" rel="nofollow" >Topic: Making page adapt to monitor resolution <span class="small">(Page 1 of 1)</span>\$

aditd
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2011

posted 11-01-2011 02:50

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

Tommmie
Obsessive-Compulsive (I) Inmate

From: Here
Insane since: Nov 2011

posted 11-01-2011 21:19

You already give the answer in your post. Use percentages for size.
Tables are evil. So unless you need to show tabular data do not use them. Use HTML and CSS instead.

Your html code would be something like this.

code:

[Doctype declaration] 
<html>
<head> 
<title> 2 column page </title>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head> 
<body>  
<div id="container">
<div id="column1"> <!-- Content of column1 goes here --> Column1 </div> 
<div id="column2"> <!-- Content of column2 goes here --> Column2 </div>
</div> <!-- End of Container div -->
</body>
</html>

Create a css file (theme.css) an put something like this in it.

code:

/* theme.css */

html, body, #container {
margin:0;
padding:0; /* reset padding and margin to Zero to avoid problems */
width: 100%;
}

#column1 {
width: 19%; 
background-color: white;
float: left}

#column2 {
width: 79% ;
background-color:black;
float:left
}

/*end of file */

As you can see both columns are missing 1% in size, this way there will always be a small gutter even when you don't declare it.

(Edited by Tommmie on 11-01-2011 21:27)

KARN
Bipolar (III) Inmate

From: Vancouver, BC
Insane since: Apr 2001

posted 05-22-2012 20:47

I'm not sure if the gutters' is completely necessary, but tables are definitely not.

80% + 20% divs should work, but do not apply your margins, padding and etc to these divs. Create additional divs inside if you need styling.

Portfolio | Tweet Me

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Making page adapt to monitor resolution (Page 1 of 1)

Insert Slimies »

Insert UBB Code »