Reason why we need a new DIV in fe-template

[NinaG]

I'd like to request a new DIV inside the fe_page Template. I don't request that easily because I am no big fan of fe-changes but this time I think there are good reasons for a small change:

I always said that we are able to build every design based on the CSS-/HTML-framework of Contao 2 without changing the fe-template. I was proud of that because it's a huge advantage of the system and a big plus for the Contao-framework.

But with the changes of the framework in Contao 3 I am not able to say that anymore. The first design I tried was not possible without changing the framework (at least I didn't find a solution).

Here is what I tried:

• Build a layout where the header uses 100% width, but the container-content only uses 960px and is centered.
• Use the layout builder CSS (with Holy Grail) and make no template changes

I see no way of doing that.

The reason is #container - you can't put it to 960px and center it because the Holy Grail layout always puts a padding-left or padding-right directly to #container if you use a sidebar (left or right). So there is only "don't use the framework" or "change the fe_page and add an additional div around #container.

That is the reason why I request a new DIV directly around #container.

<div id="container_wrapper">
<div id="container">
   ...
</div>
</div>

That way I am able to add any width-information to #container_wrapper without interfering with #container and the holy grail layout.

PS: You don't believe me? Try it for yourself! Or show me a good way of doing this without a template change.

PPS: You say "just change the template"? So you really want to admit that the new framework is less capable as the old framework? Come on, that's not how we do things with Contao. It always gets better, never worse. :)

[rumpelsepp]

+1

[Aybee]

I don't like the new framework CSS at all. A big padding used on #container to make room for the #left column, a margin of -100% on the #left column, a float left on #main even if its on the right of #left. Looks something like a css hack to me. I prefer simply
#main {
float: right;
width: 670px;
}
#left {
margin-right: 670px;
}
No padding for #container, no float for #left, no width for #left, no negative margin.

Nina, try to put this rules in a file added by 'Additional style sheets' (Zusätzliche Stylesheets) in music academy

#wrapper {
width: auto;
}
#header {
background: red;
}
#container {
padding-left: 0;
width: 870px;
margin: 0 auto;
background: yellow;
}
#main {
float: right;
width: 670px;
}
#left {
margin: 0 670px 0 0;
float: none;
right: auto;
width: auto;
}

[NinaG]

I don't want to change the way the Holy Grail CSS works or discuss if we should use the Holy Grail CSS at all - there are good reasons why we are using the Holy Grail layout. (feel free to check out the information about it in the original Holy Grail CSS article on A List Apart )

So completely changing the CSS in that case is not the way it should work. I want to use the Hol Grail + get the simple layout I talked about in the first entry to this thread :)

[leofeyer]

There is a (surprisingly) simple solution: just subtract the padding from the container width.

The example uses #container { width:760px; margin:0 auto; }.

[leofeyer]

Please close the ticket if this solves your problem.

[NinaG]

Perfect, this seems to work (also in older browsers). People just need to remember that they add #container (in this situation) also to the Media Queries of the layout builder *1.

Sorry for the hassle and thanks for the quick solution.

PS: We should definitely add important information like that to contao.org (and link to it in the forum header) as soon as Contao 3 gets released.

*1 For example like this:

#container { width:750px; margin:0 auto; }.

@media(min-width:768px) and (max-width:979px) {
  #container { width: 100%; margin: 0; }
}

@media(max-width:767px) {
  #container { width: 100%; margin: 0; }
}

And people need to remember that the size could be different from different page layouts (i.e. a layout with/without left/right columns). But that's no big thing, just need to use a page CSS class in the page layout (i.e class="sub_with_left" and .sub_left #container ... }