overlapping divs in my HTML template?

Question

I am designing a few templates for my website. I am laying the divs out and specifying the height and width of each.

I have a large container div named main_cont. Within the 'main_cont', I have three (3) container divs named 'cont_left', 'cont_center', and 'cont_right'. Each one of those divs have three divs within them named left_1, left_2, left_3, center_1, etc...

I want to freely add content to the divs named left_1, left_2, left_3 etc but I don't want to have to continually resize them. Right now when I place all of these divs, they seem to lay on the right side of the screen.

How do I position them and keep them in those locations but still being able to resize vertically, without overlapping?

Answer 1

You should use something like the 960 Grid System. It will remove the burden of writing clean css-rules to be interpreted properly by the major browsers. This allows you to spend less time stressing over layouts, and more time making progress.

From the sounds of it, your layout would look like this:

<div id="main_cont" class="container_12">
  <div id="cont_left" class="grid_3">
    <!-- Left Column -->
    <div id="left_1"></div>
    <div id="left_2"></div>
    <div id="left_3"></div>
  </div>
  <div id="cont_center" class="grid_6">
    <!-- Center Column -->
    <div id="center_1"></div>
    <div id="center_2"></div>
    <div id="center_3"></div>
  </div>
  <div id="cont_right" class="grid_3">
    <!-- Right Column -->
    <div id="right_1"></div>
    <div id="right_2"></div>
    <div id="right_3"></div>
  </div>
  <div class="clear"></div>
</div>

Another good practices is to not name elements according to their visual representation, such as left_1. Layouts may change, so your identifiers may become deceptive in the future. Rather, give them names associated to what their purpose is, such as navigation_1.