• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 136
  • Last Modified:

make css boxes grow and shrink to resolution

I know monitors are different resolution so how would I make sure that the content within the body tag is stretched accordingly?
I have a bunch of
<div> </div>

Open in new window

in a css and it works fine on my monitor at 1300X
but I'm afraid it will be messed up on lower resolutions.

is there a way to encapsulate the whole thing so its relative to the container?
 if so how thanks
1 Solution
Peter HutchisonSenior Network Systems SpecialistCommented:
Add to the top of the web page this CSS code:

<style type="text/css">
Content { width=100%; }

Also check all tags for web items such as boxes, tables and so on  and make sure that any widths and heights are set using percentages rather than pixels so that they auto-resize if the window size changes.
If everything is defaulted with no element level styling then the best approach would be:

<style type="text/css">
body { width=100%; }

However without a link to the page We have no way of knowing if the actual structure will be broken by a gross application.  Best practice is to deal with elements of the layout individually so there are no surprises.

bbimisAuthor Commented:
aw so always use % .  good to know. I was using the <value>px method.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now