Multi-columns page layout in V3

[tosca]

I'm trying to set up an "ordinary" page layout with a main column on the left and a narrower column on the right.
Whatever I do, the result is the main column width is system CSS-defined at 100%, and the right column is ... almost completely outside of the body (I can only see the first left pixels of this column).

I understand the page layout has changed in V3; for exemple, I don't see any possibility to define a default layout, so I set my 'standard' layout as the presentation for the site root, and change it only for those pages that use a different presentation. Unless there is another way to proceed?

But I don't understand how to define a main column that should be the total width of the page minus the width of the right column. I've checked with a V2.11.6 Contao I still have in local and it works without a glitch; but on the site in V3 I'm currently developing online, I cannot find any way to do the same thing.

Anybody can help?
In the mean time, I guess I'll have to add my own CSS in order to limit the width of the main column...

Thanks for helping.

[complexdesign]

There's <aside> HTML5 tag which is responsible for side columns.
I've styled (width etc.) for #main (for the main column) and aside #right for my right column in reference to the main.

Maybe this could help you understand the usage of this tag:
http://www.w3schools.com/tags/tag_aside.asp

Cheers

[tosca]

Thanks for your answer, I will have a look at the link.

But I was under the impression that the Contao framework was supposed to do the job correctly by itself, using the parameters defined in the page layout.

[complexdesign]

In Contao v3.0 big changes are in the way of building a layout.
Read here: http://contao.org/en/news/contao-3_0_RC1.html

There's

improved CSS framework with a responsive grid system

and

the layout builder switched to the "Holy Grail" layout, which displays the main column above the left and right columns

.

For me these are crucial improvements responsible for layout styling.

[tosca]

In Contao v3.0 big changes are in the way of building a layout.
Read here: http://contao.org/en/news/contao-3_0_RC1.html

Thanks for your answer.
Yes, I did read this

There's

improved CSS framework with a responsive grid system

and [quote:2dylig10]the layout builder switched to the "Holy Grail" layout, which displays the main column above the left and right columns

[/quote:2dylig10].
... , but didn't understand what this means exactly:
- what is a "responsive grid system"?
- and the "Holy Grail" layout?

and above all, how should I set up the layout in order to have the right column on the right of the main column, as it worked previously?

[complexdesign]

Responsive grid system it's the way of page styling (designing), based on a width of 960 pixels and 12 or 16 columns. See the website: http://960.gs/ where you'll find some templates with CSS file too.

"Holy Grail" is a page layout with 3 columns, where the main column is rendered first, then subcolumns.
Good description of the idea of "Holy Grail" layout you'll find i this article:
http://www.alistapart.com/articles/holygrail/

Well, in my layout i've got one, right column:

<div id="container">
 <div id="main"></div>
 <aside id="right"></aside>
</div>

And in CSS:

#right {
    width: 290px;
}

#main, #right {
    float: left;
    position: relative;
}

aside #right {
    display: inline;
    float: left;
    margin: 10px 10px 0 0;
    padding: 10px;
    width: 270px;
}

Maybe it isn't perfect, but it works for me. Hope this can be useful for you too.

[tosca]

Maybe it isn't perfect, but it works for me. Hope this can be useful for you too.

Thank you for this explanations and links, they are certeianly very useful!

The HTML and CSS you've quoted, did you write them as they are? Or were they generated automatically by Contao?

Because with a total page width of 980px and a right column of 300px, I couldn't find any way to get the right column beside the main one, and I had to code the CSS manually in order to display the two columns side by side.

[complexdesign]

The structure (HTML) is made by Contao and CSS is my own, but width value is set also in Contao Page layout.
I could recommend you FF plugin called Firebug to inspect source code of a page (both HTML and CSS), which is very handy.
Take a look where is your right column - eg. check margin values.
And if the problem still exists give me a link to the page.

[tosca]

The structure (HTML) is made by Contao and CSS is my own, but width value is set also in Contao Page layout.
I could recommend you FF plugin called Firebug to inspect source code of a page (both HTML and CSS), which is very handy.
Take a look where is your right column - eg. check margin values.
And if the problem still exists give me a link to the page.

Thanks for your help.
I've been using Firebug for I don't remember how many years.
The problem doesn't exist any longer as I add my own CSS rules in order to put the right column where it should have been in the first place (never had to do such a thing for the more than 3 years I've been using Typolight then Contao!)

However, if you want to have a look, go this page (website still in development stage) http://image-fixe.org/index.php/activites.html and deactivate

#main {
    float: left;
    width: 648px;
}

I have added; you'll see the main column growing to 100%, and the right column going outside of the page.
Also Contao has put this

#right {
    margin-right: -100%;
}

I don't even know how this is supposed to work... and the analyze is not made easier with all the CSS (Contao's and mine) being regrouped in the same file with an unrecognizable name (compressing? caching?)

Event if you don't read french, you can see my layout setup in this thread on thre french forum: http://forum.contao.fr/utilisation/pres ... tml#p12894