Missalignment with inline-block (other elements pushed down)

html css row offset
simon picture simon · Nov 14, 2011 · Viewed 28.4k times · Source

I'm trying to align small boxes in a row. These boxes have something like 2 elements in each. In some cases, the first element is so "much" text, that it splits into 2 lines. If this happens, all other blocks in this special line are shown below.

Long story short, here is the example: http://jsfiddle.net/PMRQ5/

If you resize the HTML field, you can see what I mean. Can somebody help?

Answer

JNDPNT picture JNDPNT · Nov 14, 2011

http://jsfiddle.net/PMRQ5/1/

Add vertical-align: top or vertical-align: bottom to the box, depends on what you want.

Related questions

Padding a table row

<html> <head> <title>Table Row Padding Issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> &…

Read More
Linethrough/strikethrough a whole HTML table row

After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is …

Read More
Bootstrap 4 row fill remaining height

I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100 to the row class but that causes a white space at the bottom of the screen. There must be a …

Read More