I'm moddifiyng a webpage through css styles and I got stuck trying to join two divs.
<div class="grid_0">
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
<div class="clear"></div>
<div class="grid_0"></div>
<div class="clear"></div>
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
The main container has a flex property (because I want the width of the page to flex with different display resolutions “out there”) and 100% width.
I want to merge the contents of FIRST and LAST grid_0 divs, but between them lay three other divs: two spacers and an add box (the one in the middle). Notice that the div in the middle (the add box) shares the same ID with the ones I want to merge.
Hiding the two spacers and the add box (using the :nth-child property) didn't do the trick..
Here's a “diagram” that shows the layout.
How can I move the three thumbs in the last grid_0 into the first grid_0 through CSS?
EDIT: I suspect this isn't doable through CSS.. I might need to use a java script.