Suppose a classical grid setup, for simplicity reduced to two columns: 2x100px with a 10px margin between. The grid is placed inside a container with width 210px, and additionally 9px padding and 1px border:

#container {
  width: 210px;
  padding: 9px;
  border: 1px solid;

.column {
  float: left;
  width: 100px;
  margin-right: 10px;

The paddings on the container are important, because it may contain markup without an enclosing grid container, and that should not span fully until the border.

Somehow, the right margin of the rightmost columns must be neutralized. I may be wearing blinders, but how can I achieve this without Javascript?

All my current ideas don't work for this or that reason:

  • Switching to left margins/paddings for the columns (same problem, other side)
  • removing the right container padding (for one, it's just 9px, not the needed 10px, and for the other I need it for 'un-gridded' content)
  • using display: table-cell (there is a relevant IE6 user base here)...

1 answer


In your source you have <div class="column" style="margin-right:0"> You missed the closing ;.

Not to worry, just create a new class:

.column_right {
  float: left;
  width: 100px;
  margin-right: 0;

That should do it. :)

Answered almost 7 years ago by Kyle Sevenoaks
  • OK, maybe I over-implified a bit. Assume, that there are lots of .column containers of arbitrary height. I don't know in advance which ones will be the right-most. And for the semicolon: you don't need one to terminate the last CSS statement in a block. Boldewyn almost 7 years ago