Home/ Questions/Q 8115109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T03:21:23+00:00

I’m modifying the modern theme in magento to be fluid up to a width

  • 0

I’m modifying the modern theme in magento to be fluid up to a width of 1280px.

Everything seems to be working except I can’t get the left column and main column (in the 2 column-left layout) to display inline when the left column is a fixed width and the main column expands to fill the rest of the space. The only way i’ve gotten this to work is to absolute position the left column, which doesn’t allow the wrapper to expand with the the left column content anymore.

Hopefully that made a little a sense. Anyway, here’s the HTML and css i’m currently using with my temporary absolute positioned fix. I’ve tried using floats and inline-blocks and a few other methods I found through google but none seemed to work. The problem divs are col-left and col-main.

Any help would be greatly appreciated.

HTML:

    <div class="page">

        <div class="main-container col2-left-layout">

            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
        <div style="clear:both"></div>

            </div>

        </div>

        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>

    </div>

CSS

.page { width:80%; margin:15px auto 0; text-align:left; min-width:960px; max-width: 1280px;position:relative;}
.main-container {position:relative;float:left;clear:both;}
.main { background:#fff; border:1px solid #bbb;position:relative;float:left; padding-top:10px;width:100%;}

/* Base Columns */
.col-left { width:220px;float:left;position:absolute; left:10px;top:10px;z-index:1000;}
.col-main {  padding:0px 10px 10px 220px; float:left; margin-left:20px; }
.col-right { float:right; width:220px; padding:0 0 1px; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I seem remember doing something like this long ago the solution is quite complicated. Using negative margins etc. Luckily I think I found and article on smashingmag that explains how to do it – you might need to alter it as the example sets the body to 80% but I think theidea should work on a fullwidth site. Hope this helps:

    http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

    • 0