Make a container with elements with intermediate elements, but not with a container?

Question

• Container #666 has a margin: 20px; overflow: hidden; margin: 20px; overflow: hidden; .
• Nodes #333 have margin: 20px 0 0 20px; float: left; margin: 20px 0 0 20px; float: left; .

Example http://jsbin.com/owejal/3/edit or image:

However, the intended result:

• 20px container
• children with a gap of 20 pixels in the gap, but not with a container.

This can be achieved with a negative padding (i.e. if the container has padding: -20px 0 0 -20px ), although such a thing does not exist.

the desired result can be achieved using an additional element ( http://jsbin.com/owejal/4/ ), although I really want to learn whether there is only a CSS solution.

Answer 1

If you only care about the distance between the elements, you can drop the pseudo-element. This is for background only.

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> 

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; } 

Answer 2

This is a bit hacky, but what about just hiding the top and left margins 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;} 

Answer 3

Missing optional HTML tag - but class change and No pseudo-elements

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

Screenshot:

Will work with as many nodes as possible :)

 <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; } 

Answer 4

Since you did not specify variability as a requirement, you can simply use the declaration of the nth child, as here:

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

However, this solution is optimized for a fixed width of the parent container, so there should always be 4 elements per line. However, its css only.

Answer 5

Change the node field to:

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

See http://jsbin.com/owejal/52/edit . Please note that this will still give you an additional supplement below, but this is a common problem that is not easy to solve. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this problem (although in the case when you presented, none of these solutions work).

Answer 6

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

• If you changed the background of the body, you need to update the border color for the .foo element
• Internal nodes still have the right margin, this is also the case when your desired screen result (a group can have 5 nodes, but there will only be 4 in this solution).

 .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 a solution here.