CSS Using div to simulate tables

I'm new as webdesigner and I have to create a portion of a page that has 3 columns: a menu on the left side, the central body and a vertical banner. I can't use tables, so I've created a similar HTML:

<div class="Body">
   <div class="LeftMenu">My menu</div>
   <div class="Content">Foo body</div>
   <div class="VerticalBanner">My menu</div>
</div>

While the CSS:

.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}

So, my problem using that code is that the parent div (Body) takes the height of the first div (LeftMenu), which is not the bigger. This causes the content of "Content" and "VerticalBanner" to flow out "Body" and to go under the Footer div. If I use the float attribute, the "Body" div开发者_运维百科 collapse without dimensions and then the footer div slides under the three columns inside "Body".

I also tried with display attribute, but Internet Explorer doesn't support this and some columns have strange behaviour.

What is the correct way to do this?

I think you should use floats for your DIVs. It's much easier after that to move them around.

Use display: table-*:

.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }

See e.g. this JSfiddle.

To stop the body div from collapsing you can use

.body{ overflow: hidden; }

I'm don't think you need position absolute.

<div class="Body">
   <div style="width:20%;float:left;">My menu</div>
   <div style="width:60%;float:left;">Foo body</div>
   <div style="width:20%;float:left;">My menu</div>
   <div style="height:1px;font-size:1px;clear:both;">&nbsp;</div>
</div>