Previous / Next

Creating a basic layout

This page is under construction.

This tutorial creates a flexible 2-column layout, with a header and footer.

First we'll create four DIVs for the header, sidebar, content pane and footer.
Then we'll use the Source view to add additional styling that is currently not supported in Design view.
Finally, we will preview the results in the browser.

Instructions for making a basic layout:

Open Maqetta and begin with a blank canvas.
Create a new file and name it.
Create the header
1. Drag a DIV onto the canvas and set the height to about 70px (drag the bottom border of the div down from it's center handle, or type in the height in the Layout section).
2. Set the id to header and the Text to Header
3. Set the Background color to blue. and the Text color to white
Create the sidebar
1. Drag a DIV onto the canvas and drag the bottom border about 1/3rd of the way down the canvas window.
2. Set the id to sidebar and the Text to Sidebar
Create the content pane
1. Drag a DIV onto the canvas and drag the bottom border about 3/4ths of the way down the canvas window.
2. Set the id to content and the Text to Content
3. Set the Border to 1px solid gray.
Create the footer
1. Drag a DIV onto the canvas and resize the height to about 40px
2. Set the id to footer and the Text to Footer
3. Set the Border to 1px solid gray.
4. Click Save.
Add additional styling in Source view to create a flexible 2-column layout
1. Go to Source view
2. Near the bottom of the code you should see the four DIVs (the header div is labeled <div id="header", the sidebar div is labeled <div id="sidebar", etc.) like this:
```
<body class="claro">
<div id="header" style="width: 955px; height: 70px;">Header</div>
<div id="sidebar" style="width: 955px; height: 138px;">Sidebar</div>
<div id="content" style="border-color: #a2a2a2; border-width: 1px; border-style: solid; width: 955px; height: 207px;">Content</div>
<div id="footer" style="border-color: #a2a2a2; border-width: 1px; border-style: solid;  width: 955px; height: 40px;">Footer</div>
</body>
```
3. The styling is inside the style attribute. We will be updating some of the style properties.
4. On the header DIV, change the width to width: 100%;
5. On the sidebar DIV add float: left; and change the width to width: 19%;
6. On the content DIV add float: left; and change the width to width: 79%; (leave off 1% to allow for the border)
7. On the content DIV, change border: to border-left: (so we only have a border on the left side)
8. On the footer DIV, add clear: both; and change the width to width: 100%;
9. Here is what the body should now look like:
```
<body class="claro">
<div id="header" style="color: rgb(255, 255, 255); background-color: rgb(50, 63, 199); width: 100%; height: 66px;">Header</div>
<div id="sidebar" style="float: left; width: 20%; height: 53px;">Sidebar</div>
<div id="content" style="float: left; border-left: 1px solid rgb(187, 188, 189); width: 79%; height: 75px;">Content</div>
<div id="footer" style="clear: both; border-top: 1px solid rgb(187, 188, 189); width: 100%; height: 34px;">Footer</div>
</body>
```
10. Click Save
11. Return to Design view
12. Click the Preview in browser icon to see your layout. You will notice that the sidebar and content are very short. They will expand in height as you add your content inside these panes.
13. You are now ready to add your content by dragging widgets inside of each pane.

Customizing the layout:

From here, you can customize the layout to fit your needs. Here are some helpful tips:

Moving the sidebar to the right side

To put the sidebar on the right side, make these changes:

Go to Source view
on the sidebar and content DIVs, change float: left; to float: right;.
On the content div, change border-left: to border-right:

Adding padding inside each pane

There are several options for providing padding inside the divs. If you add padding to the layout DIVs themselves, you will have to reduce the width of each DIV because CSS will add the padding to the total width (see ____ ). A better option is to put another DIV inside each DIV, and add padding to the inner DIV. This will not affect the width of the outer div. Here's how to set the padding on the sidebar div (you can repeat the same process for each of the other divs):

Go to Design view
Select the sidebar pane
Drag a new DIV inside it
Set the padding to 10px on all sides.
Go to Source view
Find the inner div and set the width to width: 100%;

Previous / Next