Jump to content


Making page adapt to monitor resolution


  • Please log in to reply
3 replies to this topic

#1 _*aditd_*

_*aditd_*
  • Guests

Posted 24 September 2011 - 02:29 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.

#2 ChrisChase

ChrisChase

    Young Padawan

  • Members
  • Pip
  • 7 posts

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.

<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 BlueBoden

BlueBoden

    Young Padawan

  • Members
  • Pip
  • 9 posts

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.
<!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 Hayden

Hayden

    P2L Jedi

  • Members
  • PipPipPip
  • 717 posts
  • Gender:Male
  • Location:Texas

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.
  • 1P0 likes this




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users