Not quite sure what you're asking or what it's got to do with the body tag...
If you want the layout to be split into 4 then what you need is this:
4 divs all floated, two left, two right and if you want them to fill the screen then give them a % width of 49% (not 50% as IE doesn't add up well).
Here's the simplest version: http://www.littleblueplane.com/test/boxes1.html
Code:
<style type="text/css">
<!--
#box1, #box3 {width:49%; float:left;border:1px solid;display:inline;clear:left;background-color:red;}
#box2, #box4 {width:49%; float:right;border:1px solid;display:inline;background-color:gray;}
p {margin:1em;}
-->
</style>
</head>
<body>
<div id="box1">
<p>Text goes here</p>
</div> <!-- end box1 -->
<div id="box2">
<p>Text goes here</p>
</div> <!-- end box2 -->
<div id="box3">
<p>Text goes here</p>
</div> <!-- end box3 -->
<div id="box4">
<p>Text goes here</p>
</div> <!-- end box4 -->
Now the problem with this is that as you can see with different length content the boxes are different lengths which is a bit ugly. So to give the impression of the same length what you do is put the top and bottom pair in their own div and then apply a background (either a colour or a background image) to these outer divs to give the impression that the boxes are the same height when they're not. Then they'll expand neatly with their content instead of either overflowing or looking ugly:
Test Two: http://www.littleblueplane.com/test/boxes.html
Code:
<style type="text/css">
<!--
#topbox {background-color:gray;overflow:hidden;border:1px solid;width:100%;}
#bottombox {clear:both;overflow:hidden;border:1px solid;width:100%;background: url(greystripe.gif) left top repeat;}
#box1, #box3 {width:49%; float:left;border-right:1px solid;display:inline;}
#box2, #box4 {width:49%; float:right;border-right:1px solid;display:inline;}
p {margin:1em;}
-->
</style>
</head>
<body>
<div id="topbox">
<div id="box1">
<p>Text Goes Here</p>
</div> <!-- end box1 -->
<div id="box2">
<p>Text Goes Here</p>
</div> <!-- end box2 -->
</div> <!-- end topbox -->
<div id="bottombox">
<div id="box3" style="clear:left;">
<p>Text Goes Here</p>
</div> <!-- end box3 -->
<div id="box4">
<p>Text Goes Here</p>
</div> <!-- end box4 -->
</div> <!-- end bottombox -->
The CSS is in the page heads.
Things that you might go huh? at:
1. overflow:hidden is to ensure that the floats are contained by the outer divs.
2. display:inline is in case of an IE double margin bug when margins are applied to adjacent floats.
(edited to add the code here in case I take the pages down)
