Question

How to mark up the page without javascript?

Both HTML elements (div1, div2) must to have fixed size.

Answer 1

You have to work with the CSS attributes
position,
top,
bottom,
left,
right and
height.
E.g.

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; left:0; right:0; top:0; height:42px; background:green">div1</div>
    <div style="position:absolute; left:0; right:0; bottom:0; top:42px; background:red">div2</div>
</div>

http://jsfiddle.net/GPHEx/1/

• position:absolute lets you determine the layout in pixels and percent (roughly speaking).
• left:0; right:0 make it full-width.
• top:0 aligns a div to the upper edge.
• bottom:0 aligns a div to the lower edge.
• height:42px and top:42px define the tiled layout.

Vertical example:

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; top:0; bottom:0; left:0; width:42px; background:green">d i v 1</div>
    <div style="position:absolute; top:0; bottom:0; right:0; left:42px; background:red">d i v 2</div>
</div>

Example with four tiles:

<div style="position:absolute; left:0; right:0; top:0; bottom:0">
    <div style="position:absolute; top:0; height:80px; left:0; width:42px; background:green">d i v 1</div>
    <div style="position:absolute; top:0; height:80px; right:0; left:42px; background:red">d i v 2</div>
    <div style="position:absolute; top:80px; bottom:0; left:0; width:42px; background:red">d i v 3</div>
    <div style="position:absolute; top:80px; bottom:0; right:0; left:42px; background:green">d i v 4</div>
</div>

Notice how top+height resp. left+width work together.
You could have more tiles as well by adding the previous height to the next top.

With overflow you can define what should happen if there is too much content. overflow:auto adds a scrollbar to the div if needed. overflow:hidden would crop it.