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.
Code:
#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)
Code:
<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.)
Bookmarks