Inline div causing uneven layout - css

Question

I'm working with Twitter and have pulled a list of all my followers and their screen names down using the API. I'm trying to display them in a nice 'grid' on my web page. However, it currently looks like this:
The issue happens when the person's screen name is so long that it goes on to two lines. I don't know why it sometimes puts a single person on a line like that...
Here's my CSS code:
div.inline {
float:left;
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}
And the HTML code:
<div class = "inline">
<?php echo $userName; ?><br>
<?php echo "<img src = ".$userImage." class = ".$class.">"; ?><br>
<select name = "choice">
<option value = "blank"></option>
<option value = "cool">Cool</option>
<option value = "uncool">Uncool</option>
</select>
</div>
Can anyone help? Perhaps there is a way to put in a blank line after the first line of their name or something if it's less than two lines long?

Answer 1

The reason someone is on a single line is because each div is different heights. Either wrap the username in an element (div for example) and set a height to that or set a height to the entire inline div. I think it would be nice to have the images aligned though, so the first option is best.
<div class="inline">
<div class="username"><?=$userName;?></div>
<?='<img src="'.$userImage.'" class="'.$class.'" alt="'.$userName.'" />';?><br />
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
For 2 lines use the following:
.username {
height: 30px;
line-height: 15px;
}
Increase height by line-height value for each line you want.

Answer 2

Try something like this:
<div class="inline">
<div style="height: 32px; line-height: 16px"><?php echo $userName; ?></div><br />
<img src=" <?php echo userImage; ?> " class=" <?php echo $class; ?> " /><br />
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
The divs height should be equivalent to two lines of text.

Answer 3

Specify a fixed height for the name and image. Your problem will be solved.
Update your markup as this:
<div class = "inline">
<div class="name"><?php echo $userName; ?></div>
<div class="image"><?php echo "<img src = ".$userImage." class = ".$class.">"; ?></div>
<select name = "choice">
<option value = "blank"></option>
<option value = "cool">Cool</option>
<option value = "uncool">Uncool</option>
</select>
</div>
And CSS to something similar.
.name { height: 30px; }
.image { height: 200px; }

Answer 4

A simple solution is to remove float:left and replace with display:inline-block, since you really do want inline elements (as kind of hinted at with your class="inline").
inline-block elements will naturally align to the text baseline, which means that longer names that spill onto new lines will push the vertical position of all elements down, therefore the person with the longest name will determine the vertical positioning of the other elements.
See demo or example code below:
CSS
div.inline {
display:inline-block;
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}
HTML
<div class="inline">
short-ish username<br/>
<img src="http://lorempixel.com/80/100/cats/1"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
name<br/>
<img src="http://lorempixel.com/80/100/cats/2"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
A really, really long username<br/>
<img src="http://lorempixel.com/80/100/cats/3"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
Short again<br/>
<img src="http://lorempixel.com/80/100/cats/4"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>
<div class="inline">
V.short<br/>
<img src="http://lorempixel.com/80/100/cats/5"/><br/>
<select name="choice">
<option value="blank"></option>
<option value="cool">Cool</option>
<option value="uncool">Uncool</option>
</select>
</div>