core- Posted April 14, 2012 Share Posted April 14, 2012 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 More sharing options...
core- Posted April 16, 2012 Author Share Posted April 16, 2012 bump Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted April 16, 2012 Share Posted April 16, 2012 So what is your question? Marty Shue Link to comment Share on other sites More sharing options...
core- Posted April 16, 2012 Author Share Posted April 16, 2012 Well my question is obvious. What margins/padding cause featured products block to break down in the next row? Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted April 16, 2012 Share Posted April 16, 2012 Well, the answer must also be 'obvious'. Here is what you changed when it broke: So i found the settings in global.css center_column .products_block ul li and increased each little block (4 of them) by 8px. Marty Shue Link to comment Share on other sites More sharing options...
core- Posted April 16, 2012 Author Share Posted April 16, 2012 Ok i'll review that code once again tomorrow Link to comment Share on other sites More sharing options...
Eihwaz Posted April 17, 2012 Share Posted April 17, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now