CODEWITHSUNDEEP
csscss-float
Gajus
Gajus

Reputation: 73898

Make container of elements with margin in-between elements but not the container?

Example, http://jsbin.com/owejal/3/edit or picture:

double margin

However, the intended result is:

enter image description here

This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.

The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.

Upvotes: 6

Views: 1765

Answers (6)

AdityaSaxena
AdityaSaxena

Reputation: 2157

No extra HTML tag - but a class change & No Pseudo elements

A simple trick which probably should work for you : http://jsbin.com/owejal/65/edit

Screenshot:

enter image description here

Will work with all possible number of nodes :)

<div class="foo"></div>
  <div class="group">
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
  </div>
  <div class="foo2"></div>

CSS:

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
  height:20px;
  background:#00f;
  border-top:20px solid white;
  margin:20px;
  margin-top:-20px;
}

Upvotes: 2

cimmanon
cimmanon

Reputation: 68329

If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div>
<div class="group">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>
<div class="foo"></div>

The CSS:

.group {
  overflow: hidden;
  margin: -10px 0 -10px 10px;
  padding-right: 10px;
  position: relative;
}

.group:before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 20px; /* 20px instead of 10px due to padding */
  bottom: 10px;
  left: 10px;
  background: #666;
}

.node {
  width: 100px;
  height: 100px;
  float: left;
  background: #333;
  margin: 10px;
}

.foo {
  height: 20px;
  background: #00f;
  margin: 20px;
}

Upvotes: 5

andi
andi

Reputation: 6522

This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements? http://jsfiddle.net/SUJtd/

.foo {height:20px; background:#00f; margin:20px 20px 0;}

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}

.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}

Upvotes: 4

Sean Ryan
Sean Ryan

Reputation: 6056

Change the margin of the node to:

.node { margin: 0 20px 20px 0; }

See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).

Upvotes: 1

algi
algi

Reputation: 577

Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:

http://jsbin.com/owejal/51/

However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.

Upvotes: 1

Mohamad Qamhieh
Mohamad Qamhieh

Reputation: 1

The following CSS will get you the desired result, actually you will still have 2 limitations:

  1. If you change the background of body, you need to update the border color for element .foo
  2. The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
    overflow: hidden;
    margin: 20px; /* margin is required */ 
    background: #666;  
}
.node {
    width: 100px;
    height: 100px;
    float: left;
    background: #333;
    margin: 0px 20px 20px 0px;
}
.foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
}
.group + .foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
    position: relative;
    top:-40px;
    border-top: 20px solid #fff;
}

You can still find the solution here

Upvotes: -1

Related Questions