Making page adapt to monitor resolution
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.
Megan posted this at 01:40 — 10th May 2011.
She has: 11,421 posts
Joined: Jun 1999
No, no, you can just use percentages in the widths of your div's instead of pixel widths. just be careful about adding margins or paddings to those div's in pixels - it will mess up the widths. You could even try doing margins and paddings as percentages.
You could consider putting a max-width in pixels on the containing div, if you want to prevent the layout from becoming too stretched out on large monitors.
Megan
Connect with us on Facebook!
webwiz posted this at 16:28 — 10th May 2011.
He has: 629 posts
Joined: May 2007
As Megan says:
HTML
<div id="main"><!-- your main content here -->
</div>
<div id="sidebar">
<!-- your subsidiary content here -->
</div>
CSS
#main {float: left;
width: 80%;
}
#sidebar {
overflow: hidden;
zoom: 1;
}
Important: No padding on #main - put a DIV inside for that. No width on #sidebar - this code makes it fill the remaining 20%, so padding is okay.
HTH
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
aditd posted this at 20:01 — 14th May 2011.
They have: 48 posts
Joined: Apr 2011
Thanks for the reply. Managed to do what I had to do.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.