Topic: Making page adapt to monitor resolution Pages that link to <a href="https://ozoneasylum.com/backlink?for=32425" title="Pages that link to Topic: Making page adapt to monitor resolution" rel="nofollow" >Topic: Making page adapt to monitor resolution\
 
Author Thread
aditd
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2011

 IP logged posted posted 11-01-2011 02:50 Edit Quote

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

 IP logged posted posted 11-01-2011 21:19 Edit Quote

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

 IP logged posted posted 05-22-2012 20:47 Edit Quote

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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu