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.
Making page adapt to monitor resolution
Started by
_*aditd_*
, Sep 24 2011 02:29 PM
3 replies to this topic
#1 _*aditd_*
Posted 24 September 2011 - 02:29 PM
#2
Posted 02 November 2011 - 11:06 AM
you have to specify an ID or CLASS, and use css to specify that the widths are those percents.
Hope this helps.
<style type="text/css"> .column1{width:80%;} .column2{width:20%;} </style> <table align="center"> <tr> <td class="column1"> </td> <td> </td class="column2"> </tr> </table>
Hope this helps.
Edited by ChrisChase, 02 November 2011 - 11:07 AM.
#3
Posted 19 November 2011 - 03:38 AM
Don't use tables for layout.
Hard to say without having a look at your code, but the general way to do something like that, would be done with the below markup.
Now you just need to add a width to those columns, and for the wrapping container, add a min-width and a max-width in pixels to avoid long lines, (its not good to go fully percentage based).
Hard to say without having a look at your code, but the general way to do something like that, would be done with the below markup.
<!DOCTYPE html> <html lang="en-US"> <head> <title>My first Website</title> </head> <body> <div id="Basement"> <div id="LeftContent"> </div> <div id="RightContent"> </div> </div> </body> </html>
Now you just need to add a width to those columns, and for the wrapping container, add a min-width and a max-width in pixels to avoid long lines, (its not good to go fully percentage based).
#Basement { width: 100%; min-width: 720px; max-width: 1600px; margin: 0 auto; /* Centers the Website */ } #LeftContent { width: 80%; } #RightContent { width: 20%; }This might not work as you expect, since padding and borders often gets added to the box-width. Therefor you should leave some room (1-2%), that should solve it.
#Basement { width: 100%; min-width: 720px; max-width: 1600px; margin: 0 auto; /* Centers the Website */ } #LeftContent { width: 79%; } #RightContent { width: 20%; }
Edited by BlueBoden, 19 November 2011 - 03:40 AM.
#4
Posted 01 January 2012 - 12:20 PM
The most common thing these days is to use a grid layout system, usually with a fixed width of 960px or a fluid layout.
Some popular options:I have used Blueprint CSS for the longest for its simplicity but recently found CSS grid. CSS grid works up to 1140px in a fluid like layout all the way down to a mobile layout. It automatically stacks your DIVs for a mobile layout when the width is smaller. I started using the reset, typography and form CSS from blueprint and the grid layout from CSS grid and have loved it.
Some popular options:I have used Blueprint CSS for the longest for its simplicity but recently found CSS grid. CSS grid works up to 1140px in a fluid like layout all the way down to a mobile layout. It automatically stacks your DIVs for a mobile layout when the width is smaller. I started using the reset, typography and form CSS from blueprint and the grid layout from CSS grid and have loved it.
- 1P0 likes this
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users