Apply margin-right to divs with siblings to the right or left of the margin to divs with siblings to the left
I have seven divs, five of them are small and two are large as shown below:
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
CSS
.halfPanel{
width:48%;
display:inline-block;
height:48%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
}
.fullPanel{
width:100%;
display:inline-block;
height:100%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
}
I need to put a space after each half of a Panel that has the other half of a Panel that follows it to the right. But the problem is that these seven panels are draggable and can be rearranged in some way. I can't add a new div wrapping the two halves, or I can't use jQuery to do this. I need to implement this with pure css, without any HTML changes.
What I have tried:
div.halfPanel + div.halfPanel{
margin-left:2%;
}
div.halfPanel + div.halfPanel+ div.halfPanel{
margin-left:0%;
}
div.halfPanel + div.halfPanel+ div.halfPanel+div.halfPanel + div.halfPanel{
margin-left:0%;
}
div.halfPanel + div.halfPanel + div.halfPanel+ div.halfPanel{
margin-left:2%;
}
But I know this is ugly css and does not scale at all. Is there a better way to achieve this?
JSFiddle for what I have implemented.
EDIT: I cannot use flexbox.
source to share
Update: Dropped .halfPanel
to 47.5%
p 48%
. See the code below or in
this fiddle for a working solution. Works with any number of full and half panels as far as I know.
.halfPanel{
width:47.5%;
display:inline-block;
height:48%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
float: left;
margin-right: 2%;
}
.fullPanel{
width:100%;
display:inline-block;
height:100%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
}
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
source to share
.halfPanel{
width:48%;
display:inline-block;
height:48%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
}
.fullPanel{
width:100%;
display:inline-block;
height:100%;
border:1px solid black;
text-align:center;
margin-bottom:4%;
}
.test {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<span> Using Flex box (resize browser) </span>
<div class="test">
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='halfPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
<div class='fullPanel'>TEST</div>
</div>
You can try: nth (even). Example below and another example with flexbox
source to share