1

This question relates to the Unsemantic Grid Framework (unsemantic.com).

This is my html:

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="css/unsemantic-grid-responsive-no-ie7.css" />

    <style>
        div.blue {
            background-color: #00f;
        }

        div.green {
            background-color: #0f0;
        }
    </style>


</head>

<body>

    <div class="grid-container">
        <div class="grid-30 blue">
            30%
        </div>
        <div class="grid-70 green">
            70%
        </div>
    </div>


</body>

</html>

This is the CSS portion of unsemantinc that deals with defining the key aspects:

  .grid-container:before, .clearfix:before,
  .grid-container:after,
  .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after, .clearfix:after {
    clear: both;
  }

  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-parent {
    padding-left: 0;
    padding-right: 0;
  }

I use the unsemantic-grid-responsive-no-ie7.css file. In theory, this should create two divs side by side, one taking 30% width and the other 70% width. Between them, there should be a 20px gutter or space if you will (as per the Unsemantic) specs.

However, I can't seem to get the gutter. The divs just stick together.

Any thoughts?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
fizzy drink
  • 682
  • 8
  • 21
  • Looking at the code you've provided I can't see how you're adding the gutter. Can you add the relevant HTML/CSS snippet that defines the gutter? – Doug Jun 06 '13 at 10:07

2 Answers2

3

The gutter is added as padding, not as a margin.

2 columns (with background colour applied) inside a container, won't have a visible 20px gutter. The container will have 10px padding each side, and the content of each column will have 10px padding each side.

If you want a visible gutter you'll need to nest an additional div, or similar.

Wicky
  • 31
  • 2
1

For a margin-based gutter, you can use the prefix-{width} or suffix-{width} classes.

<div class="grid-35 suffix-5">
 content
</div>
<div class="grid-60">
 content
</div>

should give you two columns with 5% between them.

atmarx
  • 313
  • 2
  • 6