Correctly align html divs with css
This may be a simple question, but I am confused as to how I can solve the problem I have.
I have a series of divs that displays the contact details of the users.
When all of the user contact information is listed, the contact information display is aligned correctly, for example:
However, when only some of the contact information is supplied, the contact information is misaligned. Here's a preview when the user didn't provide their email address:
How to align details when only some user data is exposed via CSS? I'm using twitter bootstrap 2.3 for responsive design, so I assumed that span4 (allowing 3 contact information per line) would align correctly, but it doesn't.
I searched SO for a solution but came up with an empty one. I've tried several fixes but can't think of anything.
Here is my HTML:
<div class="resumeStyleStandardNacContactContainer25" dir="ltr" style="direction: ltr;">
{{ #if contact_details_phone }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-phone icon_size20"></i> {{ contact_details_phone }}
</span>
{{ /if }}
{{ #if contact_details_mobile_phone }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-phone icon_size20"></i> {{ contact_details_mobile_phone }}
</span>
{{ /if }}
{{ #if contact_details_email_address }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-email icon_size20"></i> {{ contact_details_email_address }}
</span>
{{ /if }}
{{ #if contact_details_linkedin_address }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-linkedin icon_size20"></i> <span class="btu-link">{{ contact_details_linkedin_address }}</span>
</span>
{{ /if }}
{{ #if contact_details_facebook_address }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-facebook icon_size20"></i> <span class="btu-link">{{ contact_details_facebook_address }}</span>
</span>
{{ /if }}
{{ #if contact_details_twitter_address }}
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="icon-twitter icon_size20"></i> <span class="btu-link">{{ contact_details_twitter_address }}</span>
</span>
{{ /if }}
</div>
Here's my CSS:
.resumeStyleStandardNacContactContainer25 {
padding-bottom: 1px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
source to share
Move your statement if
inside the block that you see disappears. But then you need to calculate the Bootstrap column count, not span4
.
It looks like it will work, but it will remain without holes and without a JSFiddle we cannot be completely sure.
For example:
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
{{ #if contact_details_phone }}
<i class="icon-phone icon_size20"></i>
{{ contact_details_phone }}
{{ /if }}
</span>
Another way to do this is to foreach
set every possible contact opportunity (and parameters such as icon and URL), check if this value exists, but again you need to calculate what it should be span4
.
source to share