Making page adapt to monitor resolution

A

aditd

New member
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.
 
I'd opt for CSS. You make a container which is say 90% of the browser width, then within that, one which is 80% and the other which is 20, and I'd use float: left; so that they're on either side.

Something like the following:

<div id="container">
<div id="left">
<div id="right">
</div>
 
I used the table idea. As I'm not a programmer even that was hard for me but I managed to do what I wanted.
 
Be careful on the tables, too many nested tables and Google won't like you - not to mention that now that it's all inside one big table, your visitors will have to wait for ALL contents in the page to load before it will display anything. Using the CSS method is the preferred method.
 
I agree, table technique is old now. You should be learning to use Div instead of table, it will help you a lot. You should also learn CSS as good sites can not be make with out its implementation.
 
ServerSea said:
I agree, table technique is old now. You should be learning to use Div instead of table, it will help you a lot. You should also learn CSS as good sites can not be make with out its implementation.
Click to expand...
Indeed. Also, CSS+DIV is good for SEO.
 
The other problem with tables is based on accessibility.

Based on W3C Accessibility Guidelines, Priority 5.4:
If a table is used for layout, do not use any structural markup for the purpose of visual formatting.

Web Browsers in today's market now support CSS positioning correctly (or at least to a level that we can manage) so positioning should only be done with CSS.

One problem with using tables is if the user is reading the page on a text-only browser - while this might not generically be a problem or a concern, this user may be using a browser of this nature due to a disability (such as aa screen reader). The last thing you'd want to do as a professional is disregard accessibility.

Sounds scary, I know - but in truth, it's quite easy to achieve in CSS. Therefore, we should do it that way.
 
handsonhosting said:
Be careful on the tables, too many nested tables and Google won't like you - not to mention that now that it's all inside one big table, your visitors will have to wait for ALL contents in the page to load before it will display anything. Using the CSS method is the preferred method.
Click to expand...

Only need it for something internal where google does not have access. But what you said is to keep in mind for other projects.
 
I personally like fluid-fixed layouts that set a minimum width and maximum width that adjust to browser sizes, but won't be re-sized to the point where your layout looks horrible due to extreme resizing.

I do recommend you get away from nesting tables. As others have suggested, CSS is a much cleaner way to go.
 
This can easily be done with a little bit of CSS/Javascript if you're up for that.

I personally don't like the idea of auto-adapting (assuming that this is different from fluid sites), but I do think that fluid sites are great, and fixed resolution is on its way out.

If you want to get a fluid site started, just go to http://csseasy.com/ and select "Fluid". They can get you going in no time.
 
You must log in or register to reply here.

Supporters

Back
Top