HTML/CSS - How can I change the spacing or add whitespace so the boxes are equal?

Tags: html,css

Problem :

I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.

I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.

E.g. enter image description here

I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.

Like this: enter image description here

How do I change the css for the boxes to automatically resize all the boxes and not just one?

This is the layout I am using:

Solution :

It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.

For example:

#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }

    CSS Howto..

    How to save user's choice of theme of web pages

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    How can I make these floated divs wrap properly?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How to call CSS from JavaScript

    How to convert template from table to div

    How to set the maximum height of CSS images?

    How to make padding:auto work in CSS?

    How to make iframe use all height available to it

    how to add background image to css3 arrow

    How to apply CSS locally on any online page?

    How To Outline a PNG (Transparent) image with CSS?

    Div's don't show up

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to set ribbon on image by stacking it in a div?

    How to insert CSS code into a page if I can't insert it into head tag? Only inline mode?

    How to disable CSS in Browser for testing purposes

    How is it possible to align css sprites horizontally?

    How to force Google's custom search to be responsive?

    how to use css align control one row

    How to keep animated gifs animated while scrolling on iOS devices?

    Bootstrap: Only Show Fixed Footer In Larger Screens?

    How to have different transition durations for css and angular transition on same element?

    How to have a box increase its size based on its content?

    how to resize images inside a div inside another div with css?

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?

    Android - How do I create an email body from a file that contains css and html?