I am trying to align some font element vertically in a list.
I tried a bunch of thing such as playing with the vertical-align property and setting the same font-size / line-height.
I saw an interesting answer here however it seems that the base line of the label is vertically align with the icon and not the whole text itself.
ul {
list-style : none
}
.list-item__content {
padding: 10px;
border: 1px solid black;
}
.icon {
font-size: 14px;
line-height: 14px;
vertical-align: middle;
}
.label {
//vertical-align: middle;
font-size: 14px;
line-height: 14px;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bell"></span>
<span class="label">
aaaaaa
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bookmark"></span>
<span class="label">
bbbbbb
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-briefcase"></span>
<span class="label">
cccccc
</span>
</div>
</li>
</ul>
Here is my clean playground, it is kind of tough because I don't want to use flexbox for compatibility issue, and I can't afford to play with the padding/margin/line-height for each element because I need a generic solution.
Looking forward to any tips or tricks you have!
Try setting the properties directly on the pseudo :before element (which the icon uses).
.icon:before, .label {
vertical-align: middle;
font-size: 14px;
line-height: 1;
}
Updated jsfiddle
ul {
list-style : none
}
.list-item__content {
padding: 10px;
border: 1px solid black;
}
.icon:before, .label {
vertical-align: middle;
font-size: 14px;
line-height: 1;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bell"></span>
<span class="label">
aaaaaa
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bookmark"></span>
<span class="label">
bbbbbb
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-briefcase"></span>
<span class="label">
cccccc
</span>
</div>
</li>
</ul>
Related
How do I get the About Me and Education sections to the right side of the web
Here is pencode link: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Here is my HTML and CSS
`
<!DOCTYPE html>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
</div>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
</body>
</html>
`
`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Roboto Condensed', sans-serif;
}
body {
background: #D3D3D3;
font-size: 14px;
line-height: 22px;
color: #555555;
width: 200vh;
text-align: center;
}
img{
border: solid;
border_width: 5px;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.regular{
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.resume {
width: 1200px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 290px;
height: 1050px;
background: #0bb5f4;
padding: 3px;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 350px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item {
padding: 25px 0;
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data {
color: #b1eaff;
}
.resume .resume_left .resume_social .semi-bold {
color: #fff;
margin-bottom: 3px;
}
`
i want my about me section and education section to be on the right side of info section, any idea how to get that to work? thank you in advance
Not sure if you already figured this out, but a quick look at your code I saw that you had a html organization problem so the resume_right was inside the resume_left
this is your fixed code, hope it helps.
If after this you have any positioning problems, I suggest you read the CSS flex documentation.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
</div>
</div>
You should use position to choose the place of your elements in the flow,
in your example, if you want to have your "About me" and "education" always displayed on the right of your screen you have to use
position : fixed;
right : 0;
If you want them to be scrolled like everything else, you can considere using
position : absolute;
right : 0;
In both case you'll have to be carefull of element stacking.
Here are informations about position :
https://developer.mozilla.org/fr/docs/Web/CSS/position
You can use either text-align: right, or display: flex together with justify-content: flex-end. In general, text-align works mostly on text elements, and justify-content will justify all elements and content.
I think using flex box it will help you:
display: flex;
justify-content: flex-end
or you can use positioning for this for example:
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
I'm trying to center an icon and text using Bulma and flexbox in a vue.js project, I tried to follow the answer from this question (How to vertically center elements in Bulma?). My icon vertically centers but the text elements seem to be off-center with a few pixels of white space under them. They are both on the same baseline but means they aren't in line with my icon (see image below).
I'm not sure where I am going wrong, I've included my code below, I'd appreciate any help possible please
<template>
<div class="singleProjectContainer" :key="project.id">
<ul class="columns is-flex projectPreview" style="border-bottom: 0.5px solid #c1c1c1;">
<div class="column is-1 is-flex projectIcon">
<li>
<div v-if="project.projectType === 'Identity'"class="projectIcon" >
<img src="../static/SVG/Identity-Circle.svg" alt="circle icon for branding & identity" />
</div>
</li>
</div>
<div class="projectTitle column is-4">
<li> <h3>{{ project.Name }}</h3> </li>
</div>
<div class="projectSummary column is-7">
<li> <p>{{ project.Summary }}</p> </li>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'ProjectItem',
props: ['project'],
}
</script>
<style scoped>
.columns {
height: 100%;
padding: 0;
margin: 0;
}
.singleProjectContainer {
height: 72x;
margin: 0px;
}
.columns.projectPreview {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.projectIcon {
padding: 0 0 0 10px;
height: 100%;
}
.projectTitle {
height: 100%;
}
.projectIcon img {
height: 20px;
width: 20px;
}
.projectTitle h3 {
font-size: 1.2em;
font-family: 'Sporting Grotesque_Regular';
color: black;
}
</style>
.is-vcentered selector related only to columns:
https://bulma.io/documentation/columns/options/#vertical-alignment
.columns.is-vcentered {
align-items: center;
}
Bulma >= 0.9.1
Since Bulma, 0.9.1 we can use flexbox helpers:
Combined with is-flex, all of the Flexbox CSS properties are available as Bulma helpers:
flex-direction
flex-wrap
justify-content
align-content
align-items
align-self
flex-grow
flex-shrink
Example:
<div class="is-align-items-center is-flex"></div>
Snippet:
<div class="container">
<ul class="list">
<li class="box list-item is-flex is-align-items-center ">
<span class="icon has-text-danger">
<i class="fas has-text-success fa-2x fa-adjust"></i>
</span>
<h2 style="margin-left: 10px; font-size: 60px; line-height: 1;">Hello world</h2>
<h3 style="margin-left: auto;">Right text</h3>
</li>
<li class="box list-item is-flex is-align-content-center">
<span class="icon has-text-danger">
<i class="fas has-text-danger fa-2x fa-exclamation-triangle"></i>
</span>
<h2 style="margin-left: 20px; font-size: 20px;">Item 2</h2>
<h3 style="margin-left: auto;">Right text</h3>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
Bulma < 0.9.1 (Old answer)
For lists - No "built-in" way (by helpers) to align icons and text (yet).
One solution - use core is-flex and one CSS custom style (For align-items: center;) .
Snippet:
/* one custom class (not from bulma core) */
li.vcenter{
align-items: center;
}
<div class="container">
<ul class="list">
<li class="list-item is-flex vcenter">
<span class="icon has-text-danger">
<i class="fas has-text-success fa-2x fa-adjust"></i>
</span>
<h2 style="margin-left: 10px; font-size: 60px; line-height: 1;">Hello world</h2>
<h3 style="margin-left: auto;">Right text</h3>
</li>
<li class="list-item is-flex vcenter">
<span class="icon has-text-danger">
<i class="fas has-text-danger fa-2x fa-exclamation-triangle"></i>
</span>
<h2 style="margin-left: 20px; font-size: 20px;">Item 2</h2>
<h3 style="margin-left: auto;">Right text</h3>
</li>
</ul>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.2/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
Related: How to center text vertically with a large font-awesome icon?
I'm trying to align an image (a flag) with a text. Like in this footer:
I'm trying style="display:inline-block;" elements but the text and image go to far to the left:
Original footer: (Blue arrow indicates a gap)
Codepen
https://codepen.io/anon/pen/xNNrQW
Remove display:inline-block from 'footer_text_right' and wrap the name 'Peru' inside a span tag
CODEPEN
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
/* new css */
.footer_text_right img {
min-width: 15px;
}
.footer_text_right span {
display: inline-block;
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="margin-right15">
<p class="footer_text_right text-right"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg"
width="5%" height="5%">
<span>Perú</span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
<p class="footer_text_right text-right" style="display:inline-block;vertical-align: middle; float:right;"><img style="display:inline-block; align:center;vertical-align: middle;" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="15%" height="15%"> Perú</p>
Try this it works !!
Take out the img from p element and remove the inline style -- you use bootsrap so all you have to do is to set row class to wrap div (wrap of the p and img)
.padding-top3 {
padding-top: 3%;
}
.padding-bottom2 {
padding-top: 2%;
}
#footer-navbar {
background-color: #ededed;
}
ul>li {
display: inline-block;
zoom: 1;
display: inline;
}
.footer_text {
font-size: 14px;
font-weight: bold;
letter-spacing: .2em;
padding: 0px;
margin: 0px;
}
.footer_nav_links {
margin-right: 2%;
}
.footer_icons {
font-size: 18px;
color: #bfbfbf;
}
.footer_icons:hover {
color: #707070;
}
.footer_ul {
width: 100%;
}
.margin-right3 {
margin-right: 3%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="">
<div id="footer-navbar" class="footer_text">
<div class="container padding-top3 padding-bottom2">
<div class="row">
<div class="col-md-7">
<ul class="footer_ul">
<li class="footer_nav_links">
<a class="" href="/quienes_somos/">¿Quiénes somos?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/como_comprar/">¿Cómo comprar?</a>
</li>
<li class="footer_nav_links">
<a class="" href="/contactanos/">Contáctanos</a>
</li>
</ul>
</div>
<div class="col-md-5">
<div class="row">
<p class="footer_text_right text-right">Perú</p>
<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/peru-square-flag.jpg" width="5%" height="5%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<ul class="footer_ul footer-links">
<li class="margin-right3"><i class="fab fa-twitter footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-instagram footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-facebook-square footer_icons"></i></li>
<li class="margin-right3"><i class="fab fa-youtube footer_icons"></i></li>
</ul>
</div>
<div class="col-md-5 text-right">
<div class="right margin-right15">
<span class="footer_text_right">© 2019 StickersGallito</span>
<a class="footer_text_right" href="/legal/privacy">Términos</a> & <a class="footer_text_right" href="/legal/terms">Condiciones</a>
</div>
</div>
</div>
</div>
</div>
Please do style like this
<p class="footer_text_right text-right " style="display:inline-block;vertical-align: middle; float:right">Perú</p>
<img style="display:inline-block; margin-top:2px; float:right; vertical-align:middle" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?cs=srgb&dl=asphalt-beauty-colorful-237018.jpg&fm=jpg" width="5%" height="5%" />
I checked this code in your codepen and it works fine.In stacks code snippet,due to small space its not showing well.
Please try this :
<div class="margin-right15" style=" text-align:right;">
Add style with class="margin-right15", its working and align right side.
I am using a customized li element in Bootstrap 3.
What I want is something like it-
.
What I have done is-
HTML-
<ul class="list-group">
<li class="list-group-item" id="baal">
<div style="display: inline;">
<div class="inline">
Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<div class="inline">
<img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<blockquote>
<p>angulard it's obviously tremendously helpful to a lot of people - they took the time to search for a solution,</p>
</blockquote>
<div>
More thing
</div>
</div>
</li>
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
So, the div's HTML is something like-
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
And the CSS is -
/* List Item Styling */
div.inline
{
float:left;
}
.divider-vertical
{
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
/* End - List Item Styling */
But what I am getting is-
Can anyone help me to solve this problem?
Thanks in advance for helping.
Use the .clearfix class as follows:
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
<div class="clearfix"></div>
</li>
css:
/* List Item Styling */
div.inline, .divider-vertical
{
height: 50px;
float:left;
}
.divider-vertical
{
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
Firstly this question has been before (in a fashion) but without examples: Hiding an element completly that has had some overflow hidden
The Problem
I'm using the Gridster framework http://gridster.net/ to display some content and it uses a fixed height on each content area with overflow:hidden.
The content that I place in each content area could be 10 characters long or 100 characters (in a responsive framework) bootstrap and so can sometime get cut off.
Supporting Images
How it looks now
How I would like it to look
Example code
HTML
<div class="example_container">
<div class="WidgetContent pull-left">
<ul class="unstyled">
<li class="person ActivePerson">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
James Harris
</li>
<li>Senior Management</li>
<li>London</li>
<li>VP, Marketing Communications</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">76</span>
</div>
</li>
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
Carlos Fernandez
</li>
<li>Senior Management</li>
<li>Madrid</li>
<li>Senior Business Development Coordinator</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">72</span>
</div>
</li>
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
Kate Evans
</li>
<li>Research</li>
<li>London</li>
<li>Communications Systems Analyst - Millar A/C Manager</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">71</span>
</div>
</li>
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
Brian Montrose
</li>
<li>Business Development</li>
<li>New York</li>
<li>Business Development Analyst</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">70</span>
</div>
</li>
<li class="person ">
<div class="StaffThumb pull-left">
<img src="https://cdn1.iconfinder.com/data/icons/dot/256/man_person_mens_room.png">
</div>
<div class="expert-details pull-left">
<ul class="innerBox unstyled">
<li>
Alison Roberts
</li>
<li>HR</li>
<li>San Francisco</li>
<li>HR - Pension</li>
</ul>
</div>
<div class="container-number pull-right">
<span class="label">68</span>
</div>
</li>
</ul>
</div></div>
CSS
.example_container { width:300px; height:325px; overflow:hidden; }
.WidgetContent {
width: 100%;
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: left;
}
ul.unstyled, ol.unstyled {
list-style: none outside none;
margin-left: 0;
padding:0;
}
.ActivePerson {
background-color: #FCF8E3;
}
.person {
border-bottom: 1px dashed #E2E2E2;
display: block;
padding: 7px 50px;
}
li {
overflow: hidden;
}
.StaffThumb img {
border-radius: 3px;
height: 35px;
margin: 4px 10px 0 0;
width: 35px;
}
.StaffThumb {
left: 10px;
margin: 0;
position: absolute;
}
.container-number {
position: absolute;
right: 10px;
}
.ActivePerson .label {
background-color: #F89406;
}
.label {
font-size: 16px;
line-height: 20px;
margin: 0 5px;
position: relative;
top: 5px;
border-radius: 3px;
padding: 1px 4px 2px;
}
Example Fiddle
http://jsfiddle.net/3sTNL/
This little extra CSS: Uses flex layout
.WidgetContent {
height: 100%;
}
.WidgetContent > .unstyled {
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
float:left;
height: 100%;
}
.person {
position: relative;
}
fiddle here
YES!
Add column-width to the ul, equal to the container's width.
Add height to the ul, equal to the container's height minus padding/margin
Add break-inside:avoid (-webkit-column-break-inside) to the .people items
Result: http://jsfiddle.net/3sTNL/3/ (Tested in Chrome)
This is VERY haxy XD But it works!