Getting desired layout in html with use of <div> - html

Question

I am trying to have a div then inside the division have some different places where I can place stuff. For example.
<div blah>
<table blah>
content...
</table>
<table blah>
content...
</table>
<table blah>
content....
</table>
</div>
I am not really a web developer so I know this question might seem simple but any help is greatly appreciated. Oh and I am using Macromedia Dreamweaver 8.
Thanks.

Answer 1

I would suggest using three different divs and then using CSS to place the divs. Check out this w3 schools article on CSS positioning: http://www.w3schools.com/css/css_positioning.asp

Answer 2

This probably isn't the place for tutorials and "hello world"s, but here's something to get you started:
http://jsfiddle.net/rBNUy/
HTML:
<div class="main">
<div class="sidebar"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>​
CSS:
.main{ /* this makes the containing box 200x200 */
width: 200px;
height:200px;
background: #eee;
}
.sidebar{ /* this makes the sidebar 100x200 and makes it stick to as far left as it can */
background:blue;
float:left;
height:100%;
width: 100px;
}
.top, .bottom{ /* this makes the boxes 96x96 and makes them stick to as far left as they can , eventually till they hit the sidebar */
width: 96px;
height:96px;
float:left;
background:red;
border:solid 2px green;
}
​comments are obviously over-simplified, but in essence, "floating" stacks elements onto one another very much the same as you would stack letters in a word.
When a floated element runs out of space to be stacked in the same line, it just hops to the next line, and finds the closest "wall" to stack to.

Answer 3

In general, try not to use tables for non-tabular data - in other words, don't try to build a webpage using tables. Here is a good article which might get you thinking: http://www.alistapart.com/articles/practicalcss/
On a side note, a lot of people try to use w3schools for learning HTML and CSS. w3schools is an excellent reference for more experienced programmers, but I feel like it fails to teach novice programmers the big picture. You actually learn a lot from trial and error, and from looking at other people's work (source code). http://www.csszengarden.com/ has a great collection of webpages which will certainly help you pick up some new HTML and CSS techniques.
I implemented a rough solution for you of how (horrendous) your markup would have to look if you were to use tables.
http://jsfiddle.net/Wexcode/vMXQe/
HTML:
<table id="container">
<tr>
<td id="sidebar"></td>
<td id="main">
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>​
CSS:
table { background: #000; }
td { background: #fff; }
#container {
width: 600px;
height: 400px;
margin: 0 auto; }
#sidebar { width: 35%; }
#main { width: 65%; }
#main table { width: 100%; height: 100%; }
#main table tr { height: 50%; }