Container and elements in columns

**foxservia** · 07/12/2012, 11:40

Hello,

I am not sure, if I would clarify enough my question, but I need some information about css layout.

I am trying to create new layout (first time) from the scratch. I use three-column layout (left, main, right) and have the following issue:

When I have different elements in left and right column, i.e. vertical navigation in left, and some custom element in right, everything I do in navigation that includes i.e. padding or margins is reflected on element in right column and vice-versa. Is there some way to make a distinction in css for each columns, so when I am doing something in left column, there is no consequences in other columns.

I suppose that in situation I had described, all changes I made on navigation layout were passed to the container properties (which includes all columns).

Thanks.

**geung** · 07/12/2012, 12:43

<div id="left"> = #left
<div id="right"> = #right
<div id="main"> = #main

You can see the html markup for ID and Class by looking at the main fe_page.xhtml file.
Easiest way to look at various templates is to make a custom one, Contao duplicates then overrides (if you wish too) the original default templates via name. Or else you rename the fe_page.xhtml to something like fe_custom.xhtml, you can then select it in your theme as the main template, so you can have many base templates as you wish. This usually works on all core modules like news, calendar etc. and with most extensions too. Do this through the Templates menu item.

Using Firebug (firefox) or any of the inbuilt elements inspects (Chrome, Safari) to analyse the code is also a nice shortcut too, and quick way to find correct ID or Class elements

I think the navigation class is .mod_navigation, you can set a custom ID via the modules setup.

**foxservia** · 07/13/2012, 13:37

Thanks for answer.

Could you explain me an another problem, please?

I had finished basic layout and successfully created navigation, both main horizontal and meta-navigation. Everything was on right place and I didn't changed anything in fe_page. But, when I had put the first article element (custom html) in main column, complete layout has lowered, despite I didn't change anything in CSS. After that, I have removed element from main column, deleted it completely from the system and the website is still lowered (since the background picture is still in its place on the top, I suppose that this have something with wrapper, but I don't understand why the things weren't restored after I removed the element).

It seems like it has some margin-top (additional 13px or so), in spite of that it is not declared anywhere and no css has been changed.

This is the code of main css:

Code:

body {
    background:url("tl_files/tema/images/metanavi.png") left top repeat-x;
    font:12px Verdana,Ariel,Helvetica,sans-serif;
    overflow-y: scroll;
}

#wrapper {
    background-color:#fff;
    border-right:1px solid #000;
    border-left:1px solid #000;
}

#header {
    margin-top:32px;
    padding:18px;
    background-image:url("tl_files/tema/images/header.jpg");
    border-bottom:1px solid #000;
    text-decoration:none;
    color:#fff;
}

#header h1 {
    margin-top:0;
    margin-left:18px;
}

#header p#slogan {
    margin-left:18px;
}

#main {
    min-height:800px;
    padding:4px;
    background:url("tl_files/tema/images/footer.png") center top no-repeat;
    border-right:1px solid #000;
    border-left:1px solid #000;
}

#footer {
    padding-top:18px;
    padding-bottom:18px;
    text-align:center;
    background:#df7615 url("tl_files/tema/images/footer.png") center top no-repeat;
    border-bottom:1px solid #000;
    font:13 calibri;
    font-weight:bold;
    color:#fff;
}


#container {
    margin-right:18px;
    margin-left:18px;
    border-right:1px double #f00;
    border-left:1px double #f00;
}