Inline div causing uneven layout
Question by Tiffany
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 by fanfavorite
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 by Starx
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; }
