# Relative Positioning

At totalcross, we have two layouts ready to help you set up your application: HBox and VBox. These layouts can be described as 2 boxes where you "stack" your components, be it with a certain space between them or just simply really stacked. Both these layouts are extensions of the LinearBox class. To use them is pretty simple, all you ned to do is instantiate one of them, set its mode and add your components inside.

### Hbox

This layout will group your components horizontally, 

{% code title="How to use HBox Layout" %}

```java
public void initUI() {
    HBox hBox = new HBox(HBox.LAYOUT_FILL, HBox.ALIGNMENT_STRETCH);

    for (int i = 0; i < 5; i++) {
        hBox.add(new Button(i+""));
    }
    add(hBox, LEFT, CENTER, FILL, PREFERRED);
}
```

{% endcode %}

![](/files/-LdMvXswt5cx3SaWleoJ)

### Vbox

This layout will group your controllers vertically

{% code title="How to use VBox layout" %}

```java
public void initUI() {
    VBox vBox = new VBox(VBox.LAYOUT_FILL, VBox.ALIGNMENT_STRETCH);
    
    for (int i = 0; i < 5; i++) {
        vBox.add(new Button(i + ""));
    }
    add(vBox, CENTER, TOP, DP + 50, FILL);
}

```

{% endcode %}

![](/files/-LdMx-LQvganmrz9LsD2)

## Attributes

| Type    | Name                            | <p></p><p>Description</p>                                                        |
| ------- | ------------------------------- | -------------------------------------------------------------------------------- |
| **int** | LinearBox.LAYOUT\_STACK\_CENTER | Organizes the elements around the center.                                        |
| **int** | LinearBox.LAYOUT\_DISTRIBUTE    | Distributes the elements along the width or height of the box.                   |
| **int** | LinearBox.LAYOUT\_FILL          | Distribute and scale each element to fill the entire width or height of the box. |
| **int** | LinearBox.ALIGNMENT\_LEFT       | Aligns each child along the left/top border.                                     |
| **int** | LinearBox.ALIGNMENT\_RIGHT      | Aligns each child along the right/bottom border.                                 |
| **int** | LinearBox.ALIGNMENT\_CENTER     | Centers each child object.                                                       |
| **int** | LinearBox.ALIGNMENT\_STRETCH    | Stretches each child object.                                                     |
| **int** | Hbox.LAYOUT\_STACK\_LEFT        | Organizes each element from left to right.                                       |
| **int** | Hbox.LAYOUT\_STACK\_RIGHT       | Organizes each element from right to left.                                       |
| **int** | Vbox.LAYOUT\_STACK\_TOP         | Organizes each element from top to bottom.                                       |
| **int** | Vbox.LAYOUT\_STACK\_BOTTOM      | Organizes each element from bottom to top.                                       |

## Methods

| Type     | Name                                                | Description                                                                                         |
| -------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| **void** | setInsets(int left, int right, int top, int bottom) | Sets the internal paddings of this component.                                                       |
| **void** | setLayout(int mode, int alignment)                  | Sets the layout mode and alignment of this component.                                               |
| **void** | suspendLayout()                                     | Suspends all layout operations from 'add' calls until a 'resumeLayout' call.                        |
| **void** | resumeLayout()                                      | Performs all queued layout operations and resumes the default layout behaviour of the 'add' method. |
| **void** | setSpacing(int spacing)                             | Sets the spacing between components.                                                                |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.totalcross.com/master/documentation/guides/app-architecture/hbox-and-vbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.