Posted: 8/10/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.
Hello there...
Your question is interesting. Yes, there is a way to accomplish this using table, however I would go myself with divs.
Here is a complete solution:
<html> <head> <title> Full width-height two-column layout - by Hajan Selmani</title> <style type="text/css"> body { width:100%; margin:0; padding:0; } .container { padding:3px; /* little space in each side of the page */ } .column_left { width:20%; border:1px solid green; float:left; } .column_right { margin-left:20%; width:80%; border:1px solid red; } </style> </head> <body> <div class="container"> <div class="column_left"> This is my left column... </div> <div class="column_right"> This is my right column... </div> </div> </body> </html>
Please, review the code carefully. I have inline CSS which applies style to all three divs inside HTML. It adds the widths using percentages and I use float:left property to float the difs left to right.
In the HTML, I have container div (which is good practice to have one master container) and two column divs (right_column & left_column) that are dedicated for the two column website.
The apperance will change even if you resize the browser window, the columns will float to the actual 20 / 80 size.
This should be compatible in all browsers. I have tested it with IE, Mozilla, Chrome and Opera.
You can also check the following example: http://www.maxdesign.com.au/articles/two-columns/ that may give you additional options to do the task.
Hope this helps.
Regards,Hajan
