Spencer Haizel February 2016

1px border around uneven amount of divs

I'm trying to solve an issue which has plagued me for so long. I'm attempting to create the following with css:

https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420

There is an uneven amount of divs which I currently have styled like so:

.box{
    background-color: grey;
    float: left;
    width: 33.33%;
    border: 1px solid black;
}

I am attempting to re-style the divs in the middle using nth-child but it's making the divs go into weird orders and just feels really messy. Is there an easier way?

Codepen for roughly what I'm trying to do:

http://codepen.io/anon/pen/RrqNzM

Thanks.

Answers


xpy February 2016

There is no standard way to do this, a simple trick is to use a border only on the right and bottom of the .box and only top and left on the wrapping element. That way, you give the illusion that the borders collapse.

.box,
.wrapper {
  border: 1px solid red;
}
.box {
  border-top: none;
  border-left: none;
  box-sizing: border-box;
  width: 33.33333333%;
  float: left;
  height: 45px;
}
.wrapper {
  border-right: none;
  border-bottom: none;
  overflow: hidden;
}
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>


Anil February 2016

Check here different approach for same solution fiddle link https://jsfiddle.net/anilram25/rztfv00f/

<div class="main-div">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix"></div>
</div>

and css

html, body{
    margin: 0;
}

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.main-div{
  border-top:5px solid #CD4431;
  border-bottom:5px solid #CD4431;
  background-color:#1B1B1C;
  padding-bottom:1px;
  padding-left:1px;
}
.box{
    background-color: #282828;
    float: left;
    width: 33.33%;
  border:1px solid #ccc;
    margin-right: -1px ;
  margin-bottom: -1px ;
  height: 50px;
}
.clearfix{

  clear:both;
}


Abhitalks February 2016

If you want to keep the border of the container to show....

(1) Remove the left and top borders of the children:

div.wrap > div { border: 1px solid #666; border-left: none; border-top: none; }

(2) Use nth-child(3n) to remove the right border of every third child div:

div.wrap > div:nth-child(3n) { border-right: none; }

(3) Then for the last div, remove the bottom border:

div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }

Note: If you have more than seven children, then for every extra child increase the m in (-n+m). e.g. if you have eight children, it would be (-n+2) and for nine children (-n+3).

Snippet:

* { box-sizing: border-box; padding:0; margin:0; }
div.wrap {
	width: 75vw; margin: 16px; overflow: hidden; 
	border: 1px solid #666; 
	/*border-top: 5px solid darkorange; border-bottom: 5px solid darkorange;*/
}
div.wrap > div {
	width: 33.3333%;  height: 48px; float: left; 
	line-height: 48px; padding: 0px 8px; overflow: hidden;
	border: 1px solid #666; border-left: none; border-top: none;
}
div.wrap > div:nth-child(3n) { border-right: none; }
div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }
<div class="wrap">
	<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
	<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
	<div>Lorem ipsum</div>
</div>

Post Status

Asked in February 2016
Viewed 1,649 times
Voted 13
Answered 3 times

Search




Leave an answer