Div

A "div" is short for "division" and it's a very important part of building websites. Think of it like a container or a box on a webpage. It doesn't do anything special on its own, but it's super useful for organizing and styling content.

You can put all sorts of things inside a div, like text, images, videos, or other HTML elements. The cool thing about divs is that they are like blank canvases – they don't have any visible style or structure by themselves. However, you can use CSS (Cascading Style Sheets) to add style and layout to them. This means you can change their size, color, position on the page, and much more.

Here's a simple HTML and CSS example that creates a styled div:

<!DOCTYPE html>
<html>
<head>
<style>
.div-demo {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid navy;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}
</style>
</head>
<body>

<div class="div-demo">Hello, I'm a div!</div>

</body>
</html>

In this code:

  • The <div class="div-demo"> is our div element.

  • Inside the <style> tags, we defined how our div looks:

    • It's 200 pixels wide and 100 pixels tall.

    • It has a light blue background and a navy border.

    • The text inside is centered and there's padding around it, so it doesn't touch the edges.

When you put this code in an HTML file and view it in a browser, you'll see a light blue box with "Hello, I'm a div!" in the center. This box is our styled div.

Jux Div is already set as Flex with children aligned: 'center', justify content: 'center', and 80px padding. By dragging into it other objects as children, they will layout in order, of course layout and padding can be edited in the layout DDP module, as other UI styling decisions like border or background.

Jux Div Element does not have default props but as you’ll make it a component, we’ll soon present the option to add and edit props and states.

PreviousTextNextButton

Last updated