If I apply the following css to both the side bar and the main region my sidebar disappears:

#sidebar-first .block, #main-wrapper {border: 1px solid #e6e6e6;}

It looks like the blocks in the sidebar are rendered at the very bottom of the page but aren't displayed. I can see extra white space at the bottom of the page.

Files: 

Comments

This has something to do with adding css that increasing the width of the sidebar/main area.

This code works fine, because I have commented out the styles that add width:

/* SIDEBAR BLOCKS */
#sidebar-first .block {padding: 10px;
border: 1px solid #e6e6e6;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow: #C0C0C0 0px 2px 3px;-moz-box-shadow: #C0C0C0 0px 2px 3px;box-shadow: #C0C0C0 0px 2px 3px;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e6e6e6));background: -moz-linear-gradient(#fff, #e6e6e6);background: linear-gradient(#fff, #e6e6e6);}
#main-wrapper {border:1px solid #0}
/* MAIN BLOCKS */
#main-wrapper {/* padding: 10px;
border: 1px solid #e6e6e6;*/
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow: #C0C0C0 0px 2px 3px;-moz-box-shadow: #C0C0C0 0px 2px 3px;box-shadow: #C0C0C0 0px 2px 3px;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#e6e6e6));background: -moz-linear-gradient(#fff, #e6e6e6);background: linear-gradient(#fff, #e6e6e6);}

Yes, the first rule in 960gs (not just Omega) is that you cannot, under any circumstance, add left & right padding and/or margin on container or grid divs, and you should never add a border as well...

These elements will break the structure of 960 (even if only by a pixel) that will start causing strange behaviors.

Any items that need those types of styles should be put just inside a grid container, and styled as such (without applying width elements as 's automatically take the full width of that grid region (unless styled as inline or inline-block)

That's my first guess as to what was causing the issue.

Ok, I wasn't aware of that. I'd like to have my blocks and the main content wrapper to have a border and internal padding so that the text isn't touching the border.

What do you mean by "be put just inside a grid container"?

Thanks!

In the 6.x version, you should, inside the div that gets a grid class, place another div, and apply the border to THAT item... it is a common mistake (not just in 960.gs) the border property ADDS to the width of a region, and the widths are very important in grid frameworks to layout properly...

in the 7.x-2.0 version of Omega, this is all done dynamically, and would require placing an extra div inside of the appropriate region.tpl.php files.... (examples in omega/omega/templates in several custom region.tpl.php files, and also the default.

7.x-2.0 default region.tpl.php

<?php if ($content): ?>
  <div class="<?php print $classes; ?>" <?php print $attributes; ?>>
    <?php print $content; ?>
  </div>
<?php endif; ?>

7.x-2.0 region.tpl.php adding interal div
<?php if ($content): ?>
  <div class="<?php print $classes; ?>" <?php print $attributes; ?>>
    <div class="BORDER-CSS-CLASS"><?php print $content; ?></div>
  </div>
<?php endif; ?>

Thanks! That's very clear. I'll try it out and let you know.

Status:Active» Closed (works as designed)

I should have been a bit more clear.. I explained how to do something like this in the 7.x version, but didn't put as much detail in how to do it in 6.x.

In 6.x, it would be the page.tpl.php, and any variants of that where you would put an additional wrapper inside of any elements that you'd like a special container to place borders around.

Works like a charm. Just as an FYI for anyone looking for the d6 fix. My insertion in all caps below.

      <div id="main-wrapper" class="column <?php print $main_content_classes; ?>">
        <?php print $mission; ?>
        <div class="CUSTOM-CLASS"><!-- /#BEGIN CUSTOM WRAPPER -->
        <?php if($content_top): ?>
        <div id="content-top">
          <?php print $content_top; ?>
        </div><!-- /#content-top -->
        <?php endif; ?>
        <?php if ($tabs): ?>
          <div id="content-tabs" class=""><?php print $tabs; ?></div><!-- /#content-tabs -->
        <?php endif; ?>
        <?php if ($title): ?>
          <h1 class="title" id="page-title"><?php print $title; ?></h1>
        <?php endif; ?>
        <div id="main-content" class="region clearfix">
          <?php print $content; ?>
        </div><!-- /#main-content -->
        <?php if($content_bottom): ?>
        <div id="content-bottom">
          <?php print $content_bottom; ?>
        </div><!-- /#content-bottom -->
        <?php endif; ?>
         </div><!-- /#END CUSTOM WRAPPER -->
      </div><!-- /#main-wrapper -->

Just putting in my 5 cent here....
I was also looking to make the main content area a visible block thing, but I couldn't find where to place that DIV you mention here...
Did not help putting them like <div class="BORDER-CSS-CLASS"><?php print $content; ?></div> in region.tpl.php
But i actually got to think about a pure css way of doing it.

I figured out the main content area was the class region-content so i made a change in my subtheme.css like this

.content-region {
margin: -1px;
border: 1px solid #000;
}

So it is actually possible sometimes to do it with pure css, just put a minus margin on for the same width you are putting in :-)

Since I had a 1px border that's two extra pixels total across. I needed margin-left: 9px; and margin-right: 9px; which is overriding the inherited 10px margin of left and right taking out the extra 2px needed for the 1px border.