I believe that organizing and styling blocks of text in a way that’s easy for the user to digest is extremely important when building the content of a web page. I love to break apart a long paragraph into smaller boxes, but each chunk of text will not be the exact same length and the box heights will be staggered. Once you add an image/graphic at the top and a button on the bottom your “organized” box of data can suddenly appear “disorganized”. (game over pal!)
You will always need to set the “height” of the box. Whether you want to use a minimum or maximum, you will have to decide on a number (and then test the size responsiveness). And the tricky bit is assembling the DIV tags with the top graphic and bottom button “outside” the middle DIV’s. This is how you get the top and bottom items to align with each other so nicely.
I’m sure there might be a cleaner (smaller) bit of code to accomplish this, but who’s got time to research the interwebs for the slickest script? I’ve been using this code block for a while and it hasn’t failed me yet!
Tools: HTML, CSS.
