Question

Its been a long time since I programmed html. My document currently has a google chart on it contained within a div tag. I wish to add a combo box and text box to my page to manipulate the js behind the chart. Previously I have used tables to organise items on a page, but how is it done today?

By the way, my div looks like this:

<div id="visualization" style="width: 600px; height: 400px;"></div>

Answer 1

In HTML 4, you would want to use div elements, and then assign them styles with IDs or classes:

<div id="mainContent>
     <div class="container">
         <!-- Content Here-->
     </div>
     <div class="container">

     </div>
</div>

CSS; this would give you centered page 960px wide, with a border on each container

html, body {text-align: center}
#mainContent {width: 960px; margin: 0 auto;}
.container {margin: 10px; border: 1px #000 solid}

To get two columns, you would use the following for .container

.container {margin: 10px 0 10px 10px; width: 465px; float: left}

When ever you float something, you always want to give it a specific width, and if the container of the floated elements doesn’t have a specific height, you would add

<div style="height: 0; clear: both">&nbsp;</div>

otherwise the container will not extend to the bottom on the floated elements, like this

Heres an article on floats: http://www.alistapart.com/articles/css-floats-101/

I’m going to try to find some more layout stuff and edit it in.

EDIT: the main difference using HTML 5 is that it adds elements like header, footer, and section. In HTML 4 there is only div.

EDIT:

Heres another decent tutorial on using floats in layouts:

http://www.ozzu.com/html-tutorials/tutorial-multi-column-layout-using-css-float-part-t85704.html