I'm trying to achieve the following:
I'm using float:left to have a span containing the user name floating to the right of the big numbers to the left.
This is what I have so far: https://jsfiddle.net/d00ck/twcmfzo8/2/
body {
font-family: arial;
}
.container {
background-color: white;
padding-bottom: 15px width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-tier {
display: block;
}
.ranking-score {
clear: both;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
I'm obviously missing something important since I can't seem to make the span containing the "1000pts" legend to float to the right of the big number. Any help would be greatly appreciated.
You just need to change
.ranking-tier {
display: block;
}
to this:
.ranking-name {
display: block;
}
Something like this:
HTML:
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
CSS:
body {
font-family: arial;
}
.container{
background-color: white;
padding-bottom: 15px
width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-score {
clear: both;
}
.ranking-name {
display:block;
}
https://jsfiddle.net/twcmfzo8/5/
First of all add a semicolon in the .container definition in CSS, after the padding-bottom. and add float:right; margin-top:-20px; in .ranking_score
Try this One:
<div class="position">
<div style="display:inline-block; float:left;">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
</div>
<div style="float:right; display:inline-block;">
<span class="ranking-score" style="position:relative; top:20px;">1000pts</span>
</div>
</div>
That's because the float is not tall enough to affect the three spans. You can try forcing some height
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
span {
display: block;
font-size: 16px;
line-height: 1.25em;
height: 1.25em;
}
.ranking-position {
font-size: 25px;
height: 60px; /* 16px * 1.25 * 3 */
float: left;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
Or wrap them inside a flock formatting context root:
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
.ranking-position {
font-size: 25px;
float: left;
}
.position > div {
overflow: hidden;
}
span {
display: block;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
</div>
Related
Let's say I have a text and every letter is a span with display: inline-block;:
<div>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
</div>
.item {
display: inline-block;
font-size: 70px;
}
By default, if the screen is viewport is smaller it will break on any letter. I would like to break on spaces, but without removing the inline-block as I need it for something else
Here is a solution with the text inside div elements and the following CSS added:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
Demo:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
.item {
display: inline-block;
font-size: 70px;
}
<div id="wrapper">
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
</div>
</div>
I currently have a CSS grid with a dynamic number of rows where there are subsets of the rows that should be grouped together. I'd like to wrap the first column of those groups together with a drop shadow, but I can't figure out how to do this. I'm able to accomplish what I want with a border, because I'm able to drop the top and bottom border of the middle elements.
Is there a way to do this with or without a grid layout?
.grid {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-column-gap: 20px;
}
.top,
.middle,
.bottom {
border: 2px solid black;
}
.top {
border-bottom: none;
}
.middle {
border-top: none;
border-bottom: none;
}
.bottom {
border-top: none;
}
.title {
text-align: center;
padding: 5px 20px;
}
.title span {
margin: 0 20px;
}
.title,
.details,
.actions {
text-align: center;
vertical-align: middle;
margin: auto 0;
}
<div class="grid">
<span class="top title">
<span>row 1 title</span>
</span>
<span class="details">row 1 details</span>
<span class="actions">row 1 actions</span>
<span class="middle title">
<span>row 2 title</span>
</span>
<span class="details">row 2 details</span>
<span class="actions">row 2 actions</span>
<span class="middle title">
<span>row 3 has an extra long tile that wraps around</span>
</span>
<div class="details">row 3 details</div>
<span class="actions">row 3 actions</span>
<span class="bottom title">
<span>row 4 title</span>
</span>
<span class="details">row 4 details</span>
<span class="actions">row 4 actions</span>
<span class="top title">
<span>row 5 title</span>
</span>
<span class="details">row 5 details</span>
<span class="actions">row 5 actions</span>
<span class="bottom title">
<span>row 6 title</span>
</span>
<span class="details">row 6 details</span>
<span class="actions">row 6 actions</span>
</div>
There is no way to apply styles to all grid items in a specific column or row or group them for that matter. You are already doing the possible option to target the elements directly.
Hacky solution
Here I'm going to use the fact that you are using top, middle and bottom clases and creating and effect of box shadow:
use a convenient box-shadow to a pseudo element placed behind the grid items in the first column,
use background on the grid item to match the column and therefore hiding from view the shadow in between rows,
now use a margin to separate at the bottom class.
.grid {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-column-gap: 20px;
}
.top:after,
.middle:after,
.bottom:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: 0 0px 10px 2px #ddd;
background: #fff;
}
.title.bottom {
margin-bottom: 15px;
background: transparent;
}
.title {
text-align: center;
position: relative;
padding: 5px 20px;
background: #fff;
}
.title span {
margin: 0 20px;
}
.title,
.details,
.actions {
text-align: center;
vertical-align: middle;
margin: auto 0;
}
<div class="grid">
<span class="top title">
<span>row 1 title</span>
</span>
<span class="details">row 1 details</span>
<span class="actions">row 1 actions</span>
<span class="middle title">
<span>row 2 title</span>
</span>
<span class="details">row 2 details</span>
<span class="actions">row 2 actions</span>
<span class="middle title">
<span>row 3 has an extra long tile that wraps around</span>
</span>
<div class="details">row 3 details</div>
<span class="actions">row 3 actions</span>
<span class="bottom title">
<span>row 4 title</span>
</span>
<span class="details">row 4 details</span>
<span class="actions">row 4 actions</span>
<span class="top title">
<span>row 5 title</span>
</span>
<span class="details">row 5 details</span>
<span class="actions">row 5 actions</span>
<span class="bottom title">
<span>row 6 title</span>
</span>
<span class="details">row 6 details</span>
<span class="actions">row 6 actions</span>
</div>
I have a page that contains 3 rows of divs. When I hover over any one of the divs, I want the div to expand downward and cover the div below it. I achieved this using absolute positioning and by increasing the z-index value when the user hovers over the div. I would rather not style each row differently with a unique absolute position, but in order to make one div drape over the one below upon hover, I feel like I have to use this absolute positioning. Is there a more elegant way that I can create a fixed grid of 5-item rows that have expanding divs that overlap each other when the user hovers?
https://shampouya.5gbfree.com/Test_TeamSlideshow.html
<script src="https://shampouya.5gbfree.com/jquery1.9.0.min.js"></script>
<link rel="stylesheet" href="https://shampouya.5gbfree.com/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" />
<script defer src="https://shampouya.5gbfree.com/flexslider.js"></script>
<script defer src="https://shampouya.5gbfree.com/carousel.js"></script> <!--referred to as modernizr.js in the flexslider package-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
<style>
.flex-nav-prev, .flex-nav-next{display: none;} /*hide the left and right arrows*/
#BackgroundContainer{
background-color: white;
height: 1180px;
background-size: cover;
}
.profile_container{
height: 163px;
width: 144px;
overflow: hidden;
display: inline-block;
vertical-align: top;
background-color: rgba(207, 232, 221, 0.6); /*light green almost transparent*/
margin-right: 10px;
margin-bottom: 10px;
border: 2px solid #99D1E0;
border-radius: 5px;
text-align: -webkit-center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.profile_container span{
display: block;
width: 123px;
margin-bottom: 5px;
text-align: center;
font-family: 'Comfortaa' !important;
font-weight: bold;
margin-right: auto;
margin-left: auto;
font-size: 11px;
}
.profile_container .employee_name{
line-height: 18px;
color: #395880;
font-size: 14px !important;
word-spacing: 120px;
width: 130px;
}
.profile_container .job_title{
line-height: 17px;
}
.pic_container{
height: 130px;
width: 124px;
border-radius: 150px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
overflow: hidden;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.profile_pic{height: 160px;}
.Team_Container{margin-left: 10px; position: relative; z-index: 0;}
.Team_Container:hover{z-index: 1;}
.Team_Container div:hover{ /*when the user hovers over the profile-containing div*/
height: 343px;
background-color: rgba(176, 196, 222, 0.9) !important; /*purplish blue almost opaque*/
border-color: #7795BF !important;
box-shadow: 0px 8px 20px 1px grey;
}
.Team_Container div div:hover{height: 160px; background-color: aqua;} /*when the user hovers over the picture-containing inner div*/
.Team_Container_Row2{
position: absolute;
top: 193px;
}
.Team_Container_Row3{
position: absolute;
top: 373px;
}
.flexslider{
margin-top: 4px;
border: none !important; /*overrides the flexslider.css file style*/
}
.flex-viewport{width: 820px; height: 750px;}
.flex-active-slide{width: 820px;}
#slider{
background: none;
margin-bottom: 20px; /*overrides the flexslider.css file style*/
min-height: 370px; /*no longer necessary? this reserves height for the slider and makes sure that the blurb at the bottom stays there as the page loads*/
}
#carousel{
height: 40px;
width: 910px;
margin-right: 10px;
margin-bottom: 0px;
background-color: transparent;
}
#carousel li{
text-align: center;
}
#carousel span{
font-family: comfortaa;
color: #165D7A;
font-size: 20px;
line-height: 37px;
text-align: center;
}
.department_description_container{
width: 780px;
min-height: 90px;
vertical-align: middle;
border-radius: 10px;
background: linear-gradient(#DAE0E3, #C1D3DB);
border: solid 2px #7F9AAD;
padding: 10px;
margin-left: 10px;
top: 560px;
position: absolute;
z-index: 0;
}
#department_description{
font-family: comfortaa;
color: #304F5E;
font-size: 16px;
}
</style>
<div id="BackgroundContainer">
<br>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><span>Department1</span></li>
<li><span>Department2</span></li>
</ul>
</div>
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<div class="Team_Container" id="team1">
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person1 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person2 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person3 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person4 LastName</span> <br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person5 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
</div>
<div class="Team_Container Team_Container_Row2">
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person6 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person7 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person8 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person9 LastName</span> <br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person10 LastName</span> <br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
</div>
<div class="Team_Container Team_Container_Row3">
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person11 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person12 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person13 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
</div>
<div class="department_description_container">
<span id="department_description">Department 1 does X, Y, and Z.</span>
</div>
</li>
<li>
<div class="Team_Container" id="team1">
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person1 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person2 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person3 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person4 LastName</span> <br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container">
<div class="pic_container"></div>
<span class="employee_name">Person5 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
</div>
<div class="Team_Container Team_Container_Row2">
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person6 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person7 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person8 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person9 LastName</span> <br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
<div class="profile_container"><div class="pic_container"></div>
<span class="employee_name">Person10 LastName</span><br>
<span class="job_title">Job Position</span>
<span>Department</span>
</div>
</div>
<div class="department_description_container">
<span id="department_description">Department 2 does U, V, and W.</span>
</div>
</li>
</ul>
</div>
</div>
You should wrap all your profiles into one container and use percentages for your widths. By default, elements will automatically break downwards if they do not fit on the same row.
For example, if you have 6 divs and they are all set to width: 20%, the last div will automatically break down onto a separate row.
This way, your elements will be relatively responsive and you wont need to hard code values.
I suspect knowing why it is happening but I need expert knowledge on this issue to fix it because I need to keep the background-image...
I have this first parent div with his children:
<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
<div style="width:33%;">
<div class="block">
some content
</div>
</div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
</div>
Right after there is this div that is supposed to be transposed but instead this div goes hiding behind the first one. I suspect it is because the div does not contain any solid object since it only has a background as image instead of img:
<div id="banner_index" class="animated fadeIn">
<br><br>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<fmt:message key='SOMEKEY'/>
</div>
The CSS:
#banner_index{
border-bottom:2px solid whitesmoke;
width:100%;
min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
color:whitesmoke;
}
.banner_message{
font-size:x-large;
padding:1%;
font-family:print clearly;
text-transform: uppercase;
display:block;
}
Add margin-left: -159px;margin-top: 16px; to the div Here is the Updated fiddle
Hi now define your #banner_index clear both; and #wtf{width:100%;}
#banner_index{clear:both;}
#wtf{width:100%;}
#banner_index{
border-bottom:2px solid whitesmoke;
width:100%;
clear:both;
min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
color:whitesmoke;
}
.banner_message{
font-size:x-large;
padding:1%;
font-family:print clearly;
text-transform: uppercase;
display:block;
}
<div id="wtf" style="margin-top:5%; display:block; float:left; height:auto; background:whitesmoke;">
<div style="width:33%;">
<div class="block">
some content
</div>
</div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
</div>
<div id="banner_index" class="animated fadeIn">
<br><br>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<fmt:message key='SOMEKEY'/>
</div>
I have tried a lot things but not able to get desired format.
HTML:
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
CSS:
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
}
Output:
What I want:
Decrease the vertical distance between spans with class type-description. I tried using line-height and padding-bottom but could not move it. May be some parent div has display:block.
All type description aligned to left which are now center. If I use it float: left, it ruins the format completely.
Please help.
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
<style>
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
div.type2 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
line-height:15px;
}
</style>