Floating design with three columns and x rows and compatibility with optional padding
I've had this problem for quite some time now, but I don't know how I should say it. I apologize in advance if my title is vague / not descriptive enough.
I am trying to create a page where its three columns and the center column has a fixed distance between the left and right divs.
I'm looking for behavior similar to the image below, where adding a new div in the top left corner pushes all divs to the left and also keeps the spacing with the center column.
|[div] [div] [div]| |[new] [div] [div]|
|[div] [div] [div]| |[div] [div] [div]|
|[div] [div] [div]| |[div] [div] [div]|
|[div] [div] [div]| |[div] [div] [div]|
|[div] | |[div] [div] |
| |
My best idea was to add spacing-divs, unfortunately this causes a margin problem. Because the divs dividers are just clickable.
|[div] [div] [div]| |[new] [div] [div]|
|[div] [div] [div]| | [div] [div] |
|[div] [div] [div]| | [div] [div] |
I tried to do some css where the right border swallowed the div separator but I couldn't get anything to work.
I appreciate any feedback. If something is unclear about my question, feel free to ask for more information.
source to share
I solved my problem using nth-child.
a:first-child .child, a:nth-child(3n+1) .child{
margin-left:0;
}
a:nth-child(3n) .child{
margin-right:0;
}
This allowed me to remove the margin from the first and fourth elements, and also remove the right margin from every third.
This creates a layout where a new div can be added to the top of the page and still maintains the desired layout.
Here is a fiddle showing the results I was looking for. https://jsfiddle.net/9v7h4od5/
Initially, I also had a problem with nth-child, because I didn't take into account that when adding an anchor tag, it replaced the div as a child with the parent container.
source to share