Making a simple 3 column layout?

[markww]

Hi,

I was hoping to use VerticalPanel and HorizontalPanel instances to
make a simple 3 column page layout. Something like:

<VerticalPanel>
<VerticalPanel>
// this is the header (width: 100%, height: 90px)
</VerticalPanel>

<HorizontalPanel>
<VerticalPanel>
// this is column 1 (width: 30%, height: 100%)
</VerticalPanel>

<VerticalPanel>
// this is column 2 (width: 50%, height: 100%)
</VerticalPanel>

<VerticalPanel>
// this is column 3 (width: 20%, height: 100%)
</VerticalPanel>

</HorizontalPanel>
</VerticalPanel>

but the layout looks quite strange. I have to figure out css for
layouts, was hoping most of this could be handled by gwt though.
Anyone have a simple 3 col layout they could share?

Thanks

[Jaan]

Why not use docklayoutpanel?

I, for example, use following main layout:

<g:DockLayoutPanel unit="EM">
<g:north size='2' >
// header
</g:north>

<g:west size='12'>
//left panel
</g:west>

<g:center>
// center panel
</g:center>

<g:east size='20'>
// right panel
</g:east>
</g:DockLayoutPanel>

[helguita]

Hello!

We just wrote a post some days ago about how to implement this. You
can find the tutorial here:

http://blog.discovr.net/post/516021390/layout-your-app-using-gwt-2-0-the-way-you-want-it

We built this tutorial using UiBinder, so it should be straightforward
for you. Also you can download the source code within the tutorial.

We hope it helps.

H&G