Create Evenly Spaced Elements Using Only CSS
We’ve all been there. We have a series of elements that we want to line up across the parent element but, because responsive design is now king, they need to be fluid. I’ve seen some weird things with absolute positioning, and floats, and all kinds of crazy stuff.
But the truth is that there is an easier way: TEXT-ALIGN!
How It Works
Summary: we are going to create some inline-block elements and use text-align to force them to spread evenly across the parent element. In our first example, we will use “justify” while the last example will use “center”.
The HTML
<section class="parent"> <div class="kiddo"> This is Child 1 </div> <div class="kiddo"> This is Child 2 </div> <div class="kiddo"> This is Child 3 </div> <div class="kiddo"> This is Child 3 </div> <span class="bumper"></span> </section>
The CSS
.parent{ width: 100%; text-align: justify; } .kiddo{ display: inline-block; vertical-align: top; width: 20%; margin: 10px; text-align: left; } .bumper{ width: 100%; }
So in our HTML we create a parent element, with the class of “parent”, and a few child elements with a class of “kiddo”. We also added an empty span tag after these with a class “bumper”. “Bumper” is what is going to make this all work and we will talk about that in just a second.
We give the child elements a display of inline-block. The CSS command to justify text works on text nodes, which is considered an inline element. So we make the child elements inline(or in this case inline-block) and BAM! they are in the skeletal grip of Lord Justify!
So what’s with the “bumper”….? Glad you asked. If the width of the inline elements you are trying to justify do not exceed the width of the parent element, nothing gets justified. Seems like a loophole to me, but that’s the way it works.
So what “bumper” does is makes sure that your inline elements extend past the parent container. We use a span, because it is naturally an inline element, and give it a width of 100% so that we know that it will always exceed the parent width and your child elements will alway be prey to Lord Justify will always spread across the parent.And as one looks at it on smaller and smaller screens, the child elements just bump further down the page. Insta-responsive: just add swank!
Word of Warning: If, for example, you have 5 child elements with a parent width that will fit only 3, the remaining two will end up with one on the far left of the parent and one on the far right. This may or may not work with your design.
If this doesn’t work, you can do two things. One is to remove “bumper” so that the last line of elements won’t be effected by the justify and will then proceed to line up across the parent left to right. This will work on on parents will smaller widths, but if you are using a main content area you will probably need something else.
If you know that it will always be a set number of elements(say 5), you can change the HTML as follows:
The HTML
<section class="parent"> <div class="kiddo"> This is Child 1 </div> <div class="kiddo"> This is Child 2 </div> <div class="kiddo"> This is Child 3 </div> <div class="kiddo"> This is Child 3 </div> <div class="center"> <div class="kiddo"> This is Child 4 </div> <div class="kiddo"> This is Child 5 </div> </div> </section>
The CSS
.parent{ width: 100%; text-align: justify; } .kiddo{ display: inline-block; vertical-align: top; width: 20%; margin: 10px; text-align: left; } .center{ width: 100%; text-align: center; }
This will take the last two child elements and place them in another parent element that is centering the inline elements, given a less “broken” look to the layout.
Of course, if you are creating elements on the fly, such as in a CMS like WordPress…. That get’s a little trickier and we will tackle in a future post.
So what do you think? Do you use a different technique for creating fluid elements that line up across the screen?