CSS for VARIABLE #Right width? (with fixed #Left and #Main)

[Barryke]

I've got a site that uses three typolight sections: #Left #Main and #Right, besides a header and footer.
In this design, i find it hard to make the first two fixed width, and let the last one (Right) take up as much space as possible.

#left  { width: 100px; }
#main  { width: 500px; }
#right { /* width should be between 100..infinite px depending on space in browser */ }

For me a problem is that in the html (template fe_page.tpl) this is declared out of order. (right before main)

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

I want to avoid using a non-standard fe_page.tpl file if possible, and solve this in the css. I´ve tried this with #right being float:right and tried giving all position:relative, and am currently changing fe_page.tpl in spite of better options.

Can this be done using TL?

(I would prefer #main to also start caving in as soon as #right hits the 100px width bottom-limit, but that would probably push it.)

[Vera]

Of course you can do whatever you want with Contao. However, if you need the html in a different order you need to adjust the default template, but Contao was designed to make that possible. Copy the template file fe_page.tpl to the templates directory and modify as needed. 8-)

Then the css side of this question; what you ask is impossible by design. The divs have no relation towards eachother in that they know how much space the others occupy and how wide they should become to fill the screen. One option would be to absolutely position the right container with a 600px padding overlaying the main and left columns on top of the right container. But this probably has more drawbacks then that it actually helps. You could consider using tables for the main column layout as they do provide the with relationship you specifically ask for. Another solution would involve javascript. I know that the table method is against semantics and frowned upon, so using it is up to you. The alternatives have functional drawbacks that I think are the less desirable.

If you do manage to find another solution, then please let me know It should not exists in html+css at the current moment if the answer isn't tables or impaired. :P

Ow, just in case you asked for this: Contao does not provide you with the client viewport width. It just generates the html.

[Barryke]

Thanks so good to hear i was on the right track. I'm using a custom fe_back now with the order Left Main Right.

Problem however is how to disable the contao.php that is telling Right to

float:right;

which isn't helping. In the past there used to be an option, and cant find more on where its gone anywhere at Google or this forum. Do you know how to disable the contao.php?

Of course i can overwrite these rules with my own, but its not the same you know. I want it done right.

[Barryke]

I decided to go use good ol' tables and i was finisched in 3 short lines of html, and minor adjustments to my CSS. No side effects or bugs to fix with more bug-causing CSS.

Lesson i learned: Tables are not awfull, there is times you can not do without. In this case, using divs would end up with 10 long lines of html, 30's lines of css, and in between that a few workdays of patching CSS patches just to behave like any table can. Still i'm advocating semantic html and avoiding tables for layout, just a little less loud now.