Question

How do I design an HTML page such that on reducing the window to half width the HTML elements also get reduced to half width?

Answer 1

As per Tim’s original comment, you sort of have two choices which are not mutually exclusive (you can combine them).

If you want the elements to scale, you just need to use percent values. To manage things, you probably want to set your minimum and maximum widths statically, and work it from there.

CSS:

div { margin: 0; padding: 0 }
.pagewrapper { max-width: 1024px; min-width: 800px }
.halfwidth { width:40%; margin-left:5%; margin-right: 5% }

HTML:

<div class="pagewrapper">
  <div class="halfwidth"></div>
  <div class="halfwidth"></div>
</div>

This is a stupidified example. It takes a bit of thought to do it right, possibly using classes for the first “column” and the last so that there’s only padding on one side or the other.

In addition to or instead of fluidity there are media queries:

@media only screen and (max-width: 1023px) {

  body {
    font-size: 0.8em;
    line-height: 1.5em;
  }

  .pagewrapper { 
    max-width: 1023px;
    min-width: 0;
   }

}

Again, possibly not the best example because there’s more to think about than just adjusting a few dimensions.

All told… if you’re completely unfamiliar with the concept, I suggest learning from a framework that has already done most of the legwork (for example, 1140 grid at http://cssgrid.net) and then you’ll be able to pick and choose which techniques are right for you. Or at least read some articles, since an answer at SO isn’t going to get you far enough into an understanding of fluid and responsive layouts.