Align CssLayouts side by side

Hi, i just can’t get this to work:

I have a sidebar CssLayout with width 15% and height 100%, and I now want to create another CssLayout panel that has width 85% and height 100%. How would I accomplish this? I tried placing the two csslayouts in a horizontal panel, but then for some reason, the second panel is pushed 100% to the right (meaning one whole page to the right).


since ur using CssLayout I’d suggest u use yoiur styles sheet to style it.

I haven’t tested this but I imagine it to be something like

layout2.addStyleName("content"); and in your styles sheet

.content { left: 15px; height: 100% } The
Valo demo
uses CssLayout to build its menu too. I suggest you have a look at its
source code

Alternativley you could create VerticalLayout/HorizontalLayout and use the setExpandRatio() method

Put those CssLayouts indise another CssLayout, and they should be side-by-side. The other option, as Reda pointed out, is to use HorizontalLayout and configure the widths of the contained components with expand ratio:

HorizontalLayout root = new HorizontalLayout();
CssLayout sidebar = new CssLayout();
CssLayout panel = new CssLayout();
root.addComponents(sidebar, panel);
root.setExpandRatio(sidebar, 15);
root.setExpandRatio(panel, 85);