CODEWITHSUNDEEP
htmlcss
Spencer Haizel
Spencer Haizel

Reputation: 13

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.

Upvotes: 1

Views: 1506

Answers (3)

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

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

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28387

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>

Upvotes: 0

xpy
xpy

Reputation: 5621

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>

Upvotes: 4

Related Questions