4 Ways You Can Vertically Align Elements on Webgarden

Sometimes you need to change the vertical alignment of your elements. There are a number of ways you can do this - here we'll acquaint you with a few of them.
Have you ever inserted some elements on Webgarden and gotten something that looks like this?
01 Images of varying heights with marks.png
Webgarden automatically top aligns all elements. If images and other elements in the same row have varying heights, they won’t look good together. Of course, the easiest solution is to put elements of the same height together in a row and those which don’t fit somewhere else. But that isn’t always a good option, nor should it have to be.
For example, imagine you want to put your logo and a menu together in the header, but it doesn’t look good when they are top aligned. You want them to be bottom aligned.
02 Elements top aligned.png
You can choose any of the following options to change the vertical alignment of your menu. The first one does not involve any CSS. The others do, but some of them are actually very easy. Be brave and give them a try.
Add an Invisible Spacer
This first method is the only one which doesn’t involve any use of CSS, but you need to know how to work with a graphic editor to create a transparent image of a given size. This method involves inserting an optically invisible image which will push down the menu element. In order to prevent the menu from getting moved into the next row, you need to insert the invisible image and the menu into a column element. (In some design templates you may be able to see where the transparent image is because an element background is automatically added. If so, use the next method instead.)
2.5 Transparen image final result with marks.png
Start by creating a transparent image of a suitable size.
Then click on the green + icon next to the menu. Select Column.
03 Add a column edited with marks.png
In this example the column should have a Width of 5 and a Divide of 5. Save.
04 Select column width and divide edited with marks.png
Drag and drop the menu into the new column so it appears as in the image below.
05 Move menu edited.png
Insert an image element before the menu (but after the column element) by clicking on the green + icon next to the menu.
06 Add image edited with marks.png
This is where you upload the transparent image you created to push down the menu.
07 Upload image edited with marks.png
Webgarden automatically stretches images across the width of the entire cell and adjusts the height accordingly. To prevent this, go to the Advanced tab and change the Display Style to Original Size. Save.
08 Advanced image options edited with marks.png
Now the image is the original size and pushes the menu down the desired distance. In administration it may not look right, but if you look at it on your actual website it should be good. If not, adjust the size of your image accordingly.
09 Transparent image in admin edited.png
10 Transparent image on website.png
Use Inline CSS in a Paragraph Text Element ←This is the easiest way!
Here is another similar but easier way to improve the vertical alignment. This time instead of using an image, use an html element including inline CSS.
Delete the image spacer you just added and in the same place, in a Column element containing the menu (as described above), insert a Paragraph Text element.
11 Add paragraph text element edited with marks.png
You can use the paragraph text element to insert html code including inline CSS. Type exactly what you see below into paragraph text and save.
<div style="height: 31px;"></div>
This code will create a rectangular element. The property Height (which is 31 pixels) determines the distance the lower element will be pushed down.
12 Enter inline CSS edited with marks.png
If the html code is read immediately, then you won’t see the code, only its effect - an object with a height of 31 pixels which will push down the menu.
As mentioned before, what you see in administration isn’t necessarily what you will get on the actual website.
13 Inline CSS in admin edited.png
Have a look at the actual website to see if the changes look good. If not adjust only that one number (31) accordingly. In other words, if 31 doesn’t push down the menu far enough you can edit the code to say <div style="height: 35px;"></div>, for example.
14 Inline CSS on website.png
Redefine a Highlighting Pattern to Do It for You
Highlighting is a special feature which allows you to adjust an element’s background color or font using one of four preset patterns. You also have the option of redefining any preset pattern in CSS Editing. Instead of (or in addition to) defining colors and backgrounds, one of your patterns could define the upper padding of elements, set at 51 pixels. Then when you return to the Content tab and select that highlighting pattern for the menu or any other element, the designated padding will be applied.
Go to the Design tab and select CSS Editing from the left column. If you’d like to change Pattern 3, it will be called .highlight03 in CSS. Find .highlight03 in the section called /* GROUPS */.
Here you have two main options. You can delete the existing definitions for this class which will be between the { }. (Do this carefully. You don’t want to accidentally delete other code.) Or you can leave them there and add your padding in addition.
15 Find highlight03 in CSS edited with marks.png
Note: Many people prefer editing CSS with the help of a code editor. You can download a code editor for free. They usually highlight syntax and even check for errors while you are entering your code. It’s recommended to back up all of your CSS code at regular intervals. That way if something goes wrong, you can easily find your error or revert back to the previous stage if necessary.
Add the definition you see in the box below and save.
padding-top: 51px;
16 Add padding in CSS editing edited with marks.png
Go back to the Content tab, make sure Pattern 3 highlighting is selected for your menu, and save.
17 Use pattern 3 for the menu edited with marks.png
See how it looks on your actual website and if necessary, adjust the number in the CSS code accordingly.
18 Redefined highlighting pattern on website.png
The advantage of this method is that you can easily add the same extra upper padding to elements over and over again. The disadvantages are that you’ve made Pattern 3 unavailable for other use and that if you change your design template, your adjustments will be lost.
Do Some Stereotypical CSS Editing
The last method we’ll show you, is based on standard CSS editing. The principles are very similar to those in the previous method, except that you don’t change the highlighting, but rather add a rule according to Webgarden’s universal patterns to find the actual menu in the hierarchy of html elements and change it directly. Get a closer look at standard CSS editing on Webgarden in the articles Understand Webgarden’s HTML Hierarchy to Edit CSS and Change Your Font Sizes in CSS Editing. Here we’ve just included a rule you can add to adjust the placement of the menu in the header.
Add this text at the bottom of your CSS Editing and save.
.top .menuHorizontal {
padding-top: 59px;
}

19 CSS added at the bottom edited with marks.png
As usual, check to see how it looks on the actual website, and adjust the number in the code accordingly.
18 Redefined highlighting pattern on website.png
12/09/2015 02:54:00
info
Name
Email
Comment
Or visit this link or this one