How much you wanna bet they end up sticking to each other?
See, their sticking to each other.
So this is a many-buttoned remote control sort of device?
Hmmmm. I did not do anything to control the vertical space between the buttons in the first row. I would have to add that margin.
The “object” in this case is your coloured ‘shape’ (can’t think of a better term) - now, what is “its intended function or purpose”?
1 Like
Sticking.
1 Like
Whatever I want it to be.
How would you add a margin so it doesn’t stick?
How would you add a vertical space?
Changed the margin-left and margin-bottom to margin:2px all around.
Added the equivalent of a:nth-of-type(5n+1) {clear:left;} inline where needed.
The clump of boxes has 2px margin all around.
asasass-squares.html (5.2 KB)
No more inline CSS for me.
1 Like
What if I want the top 5 blocks, and the 5 blocks below to stick to the middle block vertically, what would I need to add or change?
Deja vu!
2 Likes
I tried using that code, but it doesn’t work with this one, vertical align doesn’t work, you can try it yourself, I tried it with this new code and it doesn’t work.
Have you tried the code from the CodePen in this post?
So, they sit like this:
I want to know how to do it via html.
You haven’t answered my question.
I don’t understand what the equivalent of what you used would work in html as vertical align.
HTML does not determine layout, CSS does that, you can’t do it with html.
Right now I’m trying to get the first 5 blocks and the 5 below to stick to the middle using this code.
Then how was it done here?
Look at the CodePen @DaveMaxwell provided in the post I linked to. As far as I can see, it achieves exactly the layout you have requested. If there is something there which does not match your current requirements, then you’ll need to explain more clearly what that is.