List column won't push border down? - html

Question

When the window is smaller, text on the first line:
"FILE FORMATS (XLS, XLSX, CSV OR OTHER DELIMITED, ODS)"
doesn't push the separating border down with it.
Screenshot of problem.
CSS:
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
float: left;
width: 90%;
}
HTML:
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
</ul>
How can i fix this?
If you could fix it here and send the link would be awesome :)
https://jsfiddle.net/nusmsegn/2/

Answer 1

That's because of float property inside .pricing-features-item, add float left to this element with width: 100%; and your problem will be solved, like:
.pricing-features-item {
float: left;
width: 100%;
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
Have a look at the snippet below, or look at the updated fiddle
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.pricing-background {
padding: 120px 4% 4%;
position: relative;
width: 100%;
}
.pricing-background::after {
content: '';
background: #3498db;
background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
background: -webkit-linear-gradient(top, #3498db 0%, #4394f4 100%);
background: linear-gradient(to bottom, #3498db 0%, #4394f4 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#4394f4', GradientType=0);
height: 600px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#media (min-width: 900px) {
.background {
padding: 0 0 25px;
}
}
.pricing-container {
margin: 0 auto;
padding: 75px 0 0;
max-width: 1280px;
width: 100%;
}
.panel {
background-color: #fff;
border-radius: 5px;
padding: ;
position: relative;
width: 100%;
z-index: 10;
}
.pricing-table {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#media (min-width: 900px) {
.pricing-table {
flex-direction: row;
}
}
price .pricing-table * {
text-align: center;
}
.pricing-desc {
padding: 50px 150px 0 150px;
}
.pricing-item {
border-top: 1px solid #e1f1ff;
font-size: 10px;
line-height: 1.5;
padding: 15px 0 15px;
text-transform: uppercase;
text-align: left;
}
pricing-item:last-child {
border-bottom: 1px solid #e1f1ff;
}
.pricing-plan {
border-bottom: 2px solid #e0e0e0;
padding: 50px;
}
.pricing-plan:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan {
border-bottom: none;
border-right: 1px solid #000000;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan:last-child {
border-right: none;
}
.pricing-plan-silver {
border-bottom: 2px solid #282929;
padding: 50px;
background: #282929;
}
.pricing-plan-silver:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan-silver {
border-bottom: none;
border-right: 1px solid #f1f1f1;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan-silver:last-child {
border-right: none;
}
.pricing-img {
padding: 20px;
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #808080;
font-weight: 600;
letter-spacing: 1px;
}
.pricing-headerinfo {
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 32px;
line-height: 48px;
font-weight: 300px;
}
.pricing-features {
color: #266a98;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
float: left;
width: 90%;
}
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
float: left;
width: 100%;
}
.pricing-features-item:last-child {
border-bottom: 2px solid #e1f1ff;
}
/*## Gold list ##*/
.pricing-features-gold {
color: #494742;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.pricing-features-gold-item {
border-top: 1px solid #e0d7c1;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-gold-item:last-child {
border-bottom: 1px solid #e0d7c1;
}
<div class="pricing-background">
<div class="pricing-container">
<div class="panel pricing-table">
<div class="pricing-plan">
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
<li class="pricing-features-item">Scheduling</li>
<li class="pricing-features-item">REST/API Connections (xml, json)</li>
<li class="pricing-features-item">FTP pickup / drop-off</li>
<li class="pricing-features-item">Two-way synchronisation</li>
<li class="pricing-features-item">Support</li>
<li class="pricing-features-item">X</li>
</ul>
</div>
</div>
</div>
</div>
Hope this helps!

Answer 2

This is an issue related to float property. You have applied float for the child elements while there is no float for parent
You can fix this in two different ways as below
Apply float: left; for ".pricing-features-item". You also may have to apply width: 100% here
Apply overflow: hidden; for ".pricing-features-item"
It depends upon your task. Hope this helps! cheers!

Answer 3

Just remove the float:left from col-text.
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.col-tick {
float: left;
margin-right: 8px;
}
.col-text {}
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">+</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
</ul>

Answer 4

Working fiddle link : https://jsfiddle.net/nusmsegn/4/
Float: left > removed from your css file:
HTML:
<div class="pricing-background">
<div class="pricing-container">
<div class="panel pricing-table">
<div class="pricing-plan">
<ul class="pricing-features">
<li class="pricing-features-item">
<div class="col-tick">
+
</div>
<div class="col-text">
File formats (xls, xlsx, csv or other delimited, ods)
</div>
</li>
<li class="pricing-features-item">Dashboard hub</li>
<li class="pricing-features-item">Data filters and validation</li>
<li class="pricing-features-item">Premium data layout templates</li>
<li class="pricing-features-item">Scheduling</li>
<li class="pricing-features-item">REST/API Connections (xml, json)</li>
<li class="pricing-features-item">FTP pickup / drop-off</li>
<li class="pricing-features-item">Two-way synchronisation</li>
<li class="pricing-features-item">Support</li>
<li class="pricing-features-item">X</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.pricing-background {
padding: 120px 4% 4%;
position: relative;
width: 100%;
}
.pricing-background::after {
content: '';
background: #3498db;
background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
background: -webkit-linear-gradient(top, #3498db 0%, #4394f4 100%);
background: linear-gradient(to bottom, #3498db 0%, #4394f4 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#4394f4', GradientType=0);
height: 600px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#media (min-width: 900px) {
.background {
padding: 0 0 25px;
}
}
.pricing-container {
margin: 0 auto;
padding: 75px 0 0;
max-width: 1280px;
width: 100%;
}
.panel {
background-color: #fff;
border-radius: 5px;
padding: ;
position: relative;
width: 100%;
z-index: 10;
}
.pricing-table {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#media (min-width: 900px) {
.pricing-table {
flex-direction: row;
}
}
price .pricing-table * {
text-align: center;
}
.pricing-desc {
padding: 50px 150px 0 150px;
}
.pricing-item {
border-top: 1px solid #e1f1ff;
font-size: 10px;
line-height: 1.5;
padding: 15px 0 15px;
text-transform: uppercase;
text-align: left;
}
pricing-item:last-child {
border-bottom: 1px solid #e1f1ff;
}
.pricing-plan {
border-bottom: 2px solid #e0e0e0;
padding: 50px;
}
.pricing-plan:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan {
border-bottom: none;
border-right: 1px solid #000000;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan:last-child {
border-right: none;
}
.pricing-plan-silver {
border-bottom: 2px solid #282929;
padding: 50px;
background: #282929;
}
.pricing-plan-silver:last-child {
border-bottom: none;
}
#media (min-width: 960px) {
.pricing-plan-silver {
border-bottom: none;
border-right: 1px solid #f1f1f1;
flex-basis: 100%;
padding: 25px 25px;
}
}
.pricing-plan-silver:last-child {
border-right: none;
}
.pricing-img {
padding: 20px;
margin-bottom: 25px;
max-width: 100%;
}
.pricing-header {
color: #808080;
font-weight: 600;
letter-spacing: 1px;
}
.pricing-headerinfo {
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 32px;
line-height: 48px;
font-weight: 300px;
}
.pricing-features {
color: #266a98;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.col-tick {
float: left;
width: 10px;
}
.col-text {
width: 90%;
}
.pricing-features-item {
border-top: 2px solid #000000;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-item:last-child {
border-bottom: 2px solid #e1f1ff;
}
/*## Gold list ##*/
.pricing-features-gold {
color: #494742;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 0 25px;
padding: 25px 10px 0 10px;
}
.pricing-features-gold-item {
border-top: 1px solid #e0d7c1;
font-size: 10px;
line-height: 1.5;
padding: 15px 0;
text-transform: uppercase;
text-align: left;
}
.pricing-features-gold-item:last-child {
border-bottom: 1px solid #e0d7c1;
}