Different elements in the same column

[foxservia]

I have several custom elements in left and right column. I can't figure out how to made a CSS property to have some empty space between each of them.

I.e. this is the definition of right column:

#right div.inside
float:right;
margin-top:7px;
margin-right:auto;
margin-left:auto;
padding:2px 1px 1px 2px;
background-color:#e6eef7;
border:1px solid #000;

In this way, all the elements are lined one below another, without any space between them. I tried with extra
tags in HTML custom code, which provides some effect but it is not a proper solution.

Any advice?

Thanks.

[geung]

There are are quite a few ways to do this, depending on how efficient you want to be. here are two of them.

1. Each time you make an element type (depending on what it is), you might see a field that says "Space in front and after" here you put the pixel number you wish for spacing. So each element can be individually controlled via the backend.

or

2. If you know you wish a whole bunch of elements to behave the same way i.e 20px bottom, use a CSS Class. Most elements have an area where you can define the CSS ID/Class (class in second field), place a custom class name here and manipulate it via your CSS file.

CSS ID/Class fields can be found in module setup too, such as mod_navigation, so you can specify a custom ID/Class.

[foxservia]

Unfortunately, neither of both is available for Custom HTML module. There is no additional settings for that type of front-end-module (with exception of access settings). :|

PS. Now I am trying with
tags, but that is totally unreliable, because of sometimes it needs only one tag for effect, another time two tags or none...

[geung]

I did say most elements

The html module/element does not need the CSS ID/Class fields because you can define it in the html code itself.

All the other element types do not allow or have very limited html manipulation, so requires the field.

example, is do this:

<div class="MyCustomClass">
what ever your own code goes here
</div>

[foxservia]

Perfect! It works!

Thank you very much, you saved me a lot of potentially wasted time.