Mon, 2010-08-30 01:56
Hi: I'm just getting used to CSS. When I use the .container_12wb, it defeats the 960 grid system except for grid_12. In other words, grid_9, grid_10, etc. all stack up on one another. However, if I modify the container and delete the min-height, it works fine. I'd like to keep the min-height feature but still use the grid system. Any ideas?
html:
<div id="content" class="container_12wb topborder"> <div class="grid_9">
CSS:
#content { clear: both; background: #FFF; padding-top: 15px; padding-bottom: 15px; border-right: 2px solid #000; border-left: 2px solid #000; font: 12px/18px Arial, Helvetica, sans-serif; } .container_12wb { margin-left: auto; margin-right: auto; width: 960px; min-height: 480px; } .topborder { border: 2px solid #000; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 15px; margin-right: 15px; }
Mon, 2010-08-30 06:41
#1
You fail to show us
You fail to show us sufficient code to be able to really help.
All I can deduce is that you have a container, width 960px and with a possible 12 further elements nested within it, these having margins of 30px on the horizontal, no idea though of the possible width these child elements may have.
Snippets are seldom helpful it's why we ask in the posting guidelines that all code is posted, in this instance we really need to see the rest of the markup.