Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 4 of 4
3 column layout in Modern theme
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

Ok i think i got it working, but now my product view page is all out of whack :(

I want the main product view look like the first image below (but with the third column also)

but instead it looks like the second one

i tried messing around with my css layout but im lost.

Image Attachments
Clip_13.jpgClip_14.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

It looks like you ran out of room for all three columns, you’ll need to adjust the width of your center column(s) and make it more narrow so that everything can fit.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

thanks for helping me with this, you’re really nice to help me!  Im a little new to coding, but trying to learn.  let me try that, i kept thinking i had to go bigger .. theres so many codes that say Main that i wasnt sure i was changing the right columns.  you mean this here?

/* Layout ================================================================================ */
.wrapper {}
.page { width:1280px; margin:15px auto 0; text-align:left; }
.page-print { background:#fff; padding:25px 30px; text-align:left; }
.page-empty { background:#fff; padding:20px; text-align:left; }
.page-popup { background:#fff; padding:25px 30px; text-align:left; }
.main-container {}
.main { background:#fff; border:1px solid #bbb; border-top:0; border-bottom-color:#666; padding:16px 16px 50px; min-height:350px; }

/* Base Columns */
.col-left { float:left; width:212px; padding:0 4px 0 0; }
.col-main { float:left; width:700px; padding:0 4px 0 0; }
.col-right { float:right; width:212px; padding:0 0 0 0; }

 
Magento Community Magento Community
Magento Community
Magento Community
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

i must be a complete moron because i just can’t figure it out, ive tried messing around with the widths and it doesnt do anything to the product page, it only changes the category/subcatgory pages.

heres part of my styles.css page , if you can help? (not even sure if im changing the right part).

/* Layout ================================================================================ */
.wrapper {}
.page { width:1280pxmargin:15px auto 0text-align:left}
.page-print { background:#fff; padding:25px 30px; text-align:left; }
.page-empty { background:#fff; padding:20px; text-align:left; }
.page-popup { background:#fff; padding:25px 30px; text-align:left; }
.main-container {}
.main { background:#fff; border:1px solid #bbb; border-top:0; border-bottom-color:#666; padding:16px 16px 50px; min-height:350px; }

/* Base Columns */
.col-left { float:leftwidth:196pxpadding:0 4px 1px}
.col-main { float:leftwidth:700pxpadding:0 4px 1px}
.col-right { float:rightwidth:196pxpadding:0 0 1px}



/* 1 Column Layout */
.col1-layout .main { padding:16px 30px 40px}
.col1-layout .col-main { float:nonewidth:auto}

/* 2 Columns Layout */
.col2-left-layout .col-main { float:right}
.col2-right-layout .col-main {}

/* 3 Columns Layout */
.col3-layout .col-main { width:755px}
.col3-layout .col-wrapper { float:leftwidth:705px}
.col3-layout .col-wrapper .col-main { float:right}

/* Content Columns */
.col2-set .col-1 { float:leftwidth:48.5%; }
.col2-set .col-2 { float:rightwidth:48.5%; }
.col2-set .col-narrow { width:32%; }
.col2-set .col-wide { width:65%; }

.col3-set .col-1 { float:leftwidth:32%; }
.col3-set .col-2 { float:leftwidth:32%; margin-left:2%; }
.col3-set .col-3 { float:rightwidth:32%; }

.col4-set .col-1 { float:leftwidth:23.5%; }
.col4-set .col-2 { float:leftwidth:23.5%; margin:0 2%; }
.col4-set .col-3 { float:leftwidth:23.5%; }
.col4-set .col-4 { float:rightwidth:23.5%; }
/* ======================================================================================= */
 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Well, your .product-img-box is set to 302px and your .product-info-box is set to 363px so you’re going to have to make them narrow as well. Do you use Firebug? It will help you out tremendously. www.getfirebug.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

Thanks for your help, i tried that and it just made it worse, squooshed everything together even more.  Im about ready to give up, i dont understand it.  Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Everything probably will get squished together using 3 columns on that page - your other option is to make the overall page width wider, but you’ll have to remember that it needs to fit on peoples screens.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lurebeauty
Sr. Member
 
Avatar
Total Posts:  229
Joined:  2009-07-06
 

I had already done that, i made it 1296 width and it still kept pushing it altogether on one side or the other, OR it would drop the picture and overview below :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
allenscholar
Jr. Member
 
Total Posts:  1
Joined:  2011-01-13
 

I am facing the same problem. The right column is just for me that does not appear at all. Even after the code uncommented.

 
Magento Community Magento Community
Magento Community
Magento Community
 
slapolice
Jr. Member
 
Total Posts:  1
Joined:  2010-03-31
 

Hello,
I am also facing the same issue with the 3col. The right-col is below the main content. I am using Enterprise 1.9.

When I go back to default template, everything is just fine. I’ve tried to replace some of my files with some of the ones provided in the entreprise/default package, but with no success. Even with Firebug I am not able to figure where I need to make modifications.

At a certain point, I am able to have the 3col showing correctly, but all my static blocks are no longer showing.

Can someone post all pages related to the 3col layout?

Thank you.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 4 of 4