Jump to content

I want to widen the central column


Recommended Posts

Hi

 

I'm trying to widen the central column in global.css as there's a lot of empty space around.

 

I decreased the left and right column margins from 21 to 3px and increased the width of the central column (#center_column) from 556 to 592px.

 

It expanded the products list but it didn't affect the featured products block.

 

So i found the settings in global.css center_column .products_block ul li

and increased each little block (4 of them) by 8px.

However it has broken the container block so that the 4th little block dropped down into the next row.

 

It is obvious that the cause are some margins or padding around the featured block (left and right) which i cannot find in global.css.

 

Thanks

Link to comment
Share on other sites

You can also try styling it like this:


#center_column .products_block ul {
   text-align: justify;
   line-height: 0;
   font-size: 1px;
   text-justify: newspaper;
   zoom: 1;
   text-align-last: justify;
   list-style: none;
}

#center_column .products_block ul:after {
   width: 100%;
   height: 0px;
   visibility: hidden;
   overflow: hidden;
   content: '';
   display: inline-block;
}

#center_column .products_block ul li {
   width: 120px; /* or whatever */
   display: inline-block;
   text-align: left;
   line-height: normal;
   font-size: 14px; /* Do not use ems or % here, because we've reset parent's font size */
   vertical-align: top;
   /* Inline-block for IE */
   *display: inline;
   *zoom: 1;
}

 

This should distribute your blocks evenly inside the "ul" container (basically it's text-align: justify, but for blocks), so you don't have to calculate margins manually.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...