the code actually creates an unwanted extra gap on the right side of the center column. I can’t figure out how to fix it, i can live it but I would prefer 10px on each side.
I think your wide gutter is from the right column being TOO far to the right… see how there’s no space between the right side of the right column and the right side of the page? At least not on my 17" monitor.
Did you just do that new upgrade they had? I had just done a bunch of work moving someone’s main col to first-in-source and wrapping the sidebars, and now Magento’s gone and done it in the upgrade. I don’t understand the float: right AND the margin-right: -230px…
I see what Vineet is doing and it may work, if the right side is floated left then it will try to hug the wrapper. However, the wrapper should have been wide enough to fill the gap in the first place.
I also notice that, if you were to give all these major boxes ugly background colours, you’d see that col-main is actually sticking out of wrapper… maybe because wrapper was made a hair too small. If you keep a backup copy somewhere, you should be able to try out Vineet’s code and see how that works for you (use the ugly background colours though so you can SEE the boxes you are playing with!!). If it breaks as you play with it, you can always go back to what you have now, because you will have a backup.
yes. I did a fresh install of 1.4 and used their blank template. I think attempted to adjust their 3 column layout following this as a guideline http://www.alistapart.com/articles/holygrail/
I personally think I should just put the 3 columns into a table. That would solve all of my problems but I was really attempting to stick to pure css layout.
I implemented the code about and now my right column is not slammed against the edge of the screen. I also applied a green bg color to the .col-wrapper, which is set at 95%. I notice it is shorter that the .col-main, but if I set it to 100%, the right column gets stuck to the bottom.
How can anything fill 100% of the available space and then move 10px more. It’s just impossible. Nothing can be bigger than 100%. Remove the 10px margin-left.
You’ll also need to set a min-width for the page to stop the column dropping.
Why did you choose such a complicated 3 column layout unless you specifically wanted that middle column first in source arrangement?
Ad to answer your question, this layout was basically already in the template. And I did like the fact that the content was the first in the source, although i’m not positive if it should be first or second for the sake of seo, but basically I was trying to keep with the template as much as I could for the moment and I could re-evaulate later. It is complicated and I pray it works cross browser.
I would still like to get the right column slammed against the right side of the screen. I’m decent with css, but this layout is really funky and now it’s totally Frankenstein’d…
It is better in a lot of ways but in some situations tables do behave better but they shouldn’t be abused for layout.
The problem here is that you have picked something that is overly complicated and the dynamics are quite hard to get a grasp on if you haven’t seen the method before.
To make room and a gap you need to increase the padding on the main element into which the column is dragged. The center column needs to be 100% and not 95%.
It’s not the OP’s fault, Paul. I have a friend (who I met here at SP asking for help with his Magento pages) who I’ve been spending the last several months on-and-off tweaking this Magento thing. Recently there was a large upgrade and many people complained that their pages broke (including the friend’s). At first I thought they were doing Holy Grail but it’s not: A box wrapping main and left is floated left, while a right col is floated right. Inside the wrapping box, main first-in-source is floated right and left col floated left. The problem comes in when pages have one, two and three columns. The CSS just piles up. Users like the OP are supposed to load several pages of CSS and then put any changes they themselves want into a maintheme.css… ug!
Magento is almost a reason to go to tables… it’s practically an abuse of CSS, even though individual parts make plenty of sense. Or maybe I’m biased because it’s the first of this kind of nasty template-for-everyone that I’ve actually had to get into up to my elbows. Magento has increased my use of Firebug in amazing ways.
Yeah my last template design on this platform, I just used a 3 column container table, and that worked great. I was abashed by purists, but really in the end, isn’t it about making money first? So get site up and go
