How are Div components laid out?

What is the difference between a Div container and either the Horizontal/VerticalLayout containers?

Obviously, with a Horizontal/VerticalLayout, adding components to them will be appended horizontally or vertically to the container. But what happens with a Div? What determines how components are laid out when added to a Div?

Div is a server-side companion of a plain <div> element, which means that all the layouting is happening like the browser wants to do by default. Typically, you affect the positioning of components inside a Div with CSS. This tutorial might give you some idea of the basics: . The most common CSS layouting tool nowadays would be Flexbox (which is also what HorizontalLayout and VerticalLayout use under the hood).

Thanks Ollie, is there an example of using a Vaadin Div with CSS somewhere? Does Vaadin support the concept of “server-side CSS”, meaning CSS that I can define in the Java layer (and use/reference from inside a Div)?

Thanks again!

There are examples of Div usage e.g. in the [Business App starter]
( You can add styles directly through the Element API, like with myComponent.getElement().getStyle().set("background","red"), but I wouldn’t recommend doing that, at least to any large degree - use class names and separate CSS files instead. You can find examples of that from the Business App Starter as well.