I'm recreating a small widget from a psd and trying to put a thin border-right between the 3 container divs I'm using to separate the page into thirds. The divs have height, and I've tried adding in forced height to ensure that isn't the problem, but for some reason it just won't show up. The CSS has CSS Reset at the start, which you can grab from here.
Thanks for any help!
HTML
<div class="container">
<div class="img"><img src="1.png" alt=""></div>
<div class="txt">
<div><p class="title taa">10</p><p class="title2 tab">,000 hrs</p></div>
<div class="sub a"><p id="ac">Behavioural testing</p></div>
</div>
</div>
<div class="container">
<div class="img"><img src="2.png" alt=""></div>
<div class="txt">
<div><p class="title tba">8</p><p class="title2 tbb">years</p></div>
<div class="sub b"><p id="bc">Creafting successful user <br> experience since 2005</p></div>
</div>
</div>
<div class="container">
<div class="txt">
<div><p class="title tca">87</p><p class="title2 tcb">years</p></div>
<div class="sub c"><p id="cc">Collective experience</p></div>
</div>
<div class="img"><img src="3.png" alt=""></div>
</div>
CSS
.container {
display: inline-block;
width: 600px;
height: 300px;
border-right: 10px red;
}
.img {
display: inline-block;
}
.txt {
display: inline-block;
}
.title {
font-family: Helvetica;
font-weight: bold;
font-size: 91px;
display: inline-block;
}
.title2 {
font-family: Helvetica;
font-weight: bold;
font-size: 57px;
display: inline-block;
}
.sub {
font-family: Helvetica;
font-size: 22px;
}
.a {
position: relative;
left: 8px;
}
Change it to border-right: 10px solid red;
Border requires size and type of border; color is optional.
Related
I'm trying to create buttons and I have a parent div holding all of the other divs together. The thing with the parent div though, it's creating its own width and it just won't create an auto width around the other divs.
I just want to center all the buttons/divs perfectly and the width from the parent div is preventing me.
Any help would be amazing, thank you!!
<style>
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div, .middlelinks div, .bottomlinks div {
float: left;
width: 250px !important;
}
.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
width: 66.1%;
margin: 0 auto;
}
</style>
<html>
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<div class="announcementhelp">Announcements</div>
<div class="gettingstartedhelp">Getting Started</div>
<div class="gasrhelp">GASR 101</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<div class="forumshophelp">Forums and Shops</div>
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
<div class="sandrhelp">Support & Report System</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<div class="eventhelp">Forum Events</div>
<div class="storehelp">GASR Store</div>
<div class="profilehelp">Your Profile & Settings</div>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
You can get rid of the width on the .help-parent class and add display: flex; flex-direction: column; align-items: center; to center the divs. However, you must remove the float on the .toplinks div, .middlelinks div, .bottomlinks div for this to work. Also as a result of removing the float, the text-decoration on the links seems to come back, so I added text-decoration: none; to your <a> tags.
<style>h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div,
.middlelinks div,
.bottomlinks div {
width: 250px !important;
}
a {
text-decoration: none;
}
.helpparent .toplinks div,
.middlelinks div,
.bottomlinks div {
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<html>
<h1 class="helph1">GASR Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<a href="https://www.youtube.com/">
<div class="announcementhelp">Announcements</div>
</a>
<a href="https://www.youtube.com/">
<div class="gettingstartedhelp">Getting Started</div>
</a>
<a href="https://www.youtube.com/">
<div class="gasrhelp">GASR 101</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<a href="https://www.youtube.com/">
<div class="forumshophelp">Forums and Shops</div>
</a>
<a href="https://www.youtube.com/">
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
</a>
<a href="https://www.youtube.com/">
<div class="sandrhelp">Support & Report System</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<a href="https://www.youtube.com/">
<div class="eventhelp">Forum Events</div>
</a>
<a href="https://www.youtube.com/">
<div class="storehelp">GASR Store</div>
</a>
<a href="https://www.youtube.com/">
<div class="profilehelp">Your Profile & Settings</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
Try getting rid of your div element inside your a. This div is unnecessary and is leaving your a without a clickable area.
After that you can choose to use flex to align your content
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks a, .middlelinks a, .bottomlinks a {
width: 250px !important;
}
.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.toplinks, .middlelinks, .bottomlinks {
display: flex;
flex-direction: column;
align-items: center;
}
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
Announcements
Getting Started
101
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
Forums and Shops
Community & DMCA Guidelines
Support & Report System
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
Forum Events
GASR Store
Your Profile & Settings
</div>
<div class="seperator" style="clear:both;"></div>
</div>
I used CSS property display: flex. My content div's are not equal.
right now it looks like:
I want to make it look like so:
HTML
<div class="poplar-boxes">
<div class="popular-boxes-devider"></div>
</div>
<div class="poplar-boxes">
<div class="popular-boxes-devider">
</div>
CSS
.poplar-boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: stretch;
}
.popular-boxes-devider {
flex-basis: 30%
}
Here is a JS Fiddle
Your flex item are the same in height ( popular-boxes-devider ) . The problem is that you set the border to .info which are not equal in height.
The trick is to get them equal. You need to calculate their height depending on their margin top, padding and height of the round circle above them
See snippet below
/* Added styles */
.effect2,
.icon {
height: 100%;
}
.info {
height: calc(100% - 72px);
box-sizing: border-box;
}
.popular-boxes-devider {
margin-bottom: 15px;
}
/* end Added styles */
.poplar-boxes {
min-height: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.popular-boxes-devider {
flex-basis: 30%;
}
.box > .icon {
text-align: center;
position: relative;
background: #fff;
}
.box > .icon > .image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 4px solid white;
line-height: 88px;
border-radius: 50%;
background: #2c2c2c;
vertical-align: middle;
}
.box > .icon:hover > .image {
background: #6CB4C4;
}
.box > .icon > .image > i {
font-size: 36px !important;
color: #fff !important;
}
.box > .icon:hover > .image > i {
color: white !important;
}
.box > .icon > .info {
margin-top: -24px;
background: rgba(44, 44, 44, 0.09);
border: 1px solid #2c2c2c;
padding: 15px 0 10px 0;
}
.box > .icon:hover > .info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box > .icon > .info > h3.title {
font-size: 21px;
font-family: "Quicksand", sans-serif !important;
font-size: 28px;
color: #222;
font-weight: 500;
padding-top: 14px;
}
.box > .icon > .info > p {
font-size: 15px;
color: #666;
line-height: 1.5em;
margin: 20px 10px;
text-align: justify;
}
.box > .icon > .info > .more a {
font-family: "Quicksand", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box > .icon:hover > .info > .more > a {
color: #fff;
padding: 6px 8px;
background-color: #63B76C;
}
/* .box .space { height: 2px; background-color: #2c2c2c;} */
.btn-default {
font-family: "Quicksand", sans-serif;
background-color: #75b1ae;
color: #FFFFFF;
}
.btn-default:hover {
background-color: #FFFFFF;
color: black;
}
.box .image img {
width: 58%;
/* vertical-align: sub; */
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2 {
position: relative;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="poplar-boxes">
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/startup-registration.png" /></div>
<div class="info">
<h3 class="title">Startup Registration</h3>
<p>
SetyourBiz is a leading business setĀup services provider in India with 4% market share in highly unorganized sector of small scale consultants.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/foreign-investment.png" /></div>
<div class="info">
<h3 class="title">Foreign Investment (FDI)</h3>
<p>
Foreign investment is regulated by FEMA act, RBI circulars. Our expert advise and prompt services has what made us a renowned face in such sectors.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/licensing-and-registrations.png" /></div>
<div class="info">
<h3 class="title">Licensing & Registrations</h3>
<p>
It is imperative and mandatory for a start up as well as established business to obtain required licenses in order to legally operate.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/intellectual-property-rights.png" /></div>
<div class="info">
<h3 class="title">Intellectual Property Rights</h3>
<p>
Every business, invention, original creative work and design needs to be legally protected to claim the owner's right and safeguard it from infringement
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/accounting-and-tax.png" /></div>
<div class="info">
<h3 class="title">Accounting & tax</h3>
<p>
Accounting and taxes may be complex for you but it is simple for our expert team of CAs.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/secretarial-services.png" /></div>
<div class="info">
<h3 class="title">Secretarial Services</h3>
<p>
Corporate and economic laws may be cumbursome but not for our team of CS, experience excellence here.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/hr-and-legal.png" /></div>
<div class="info">
<h3 class="title">Legal Services</h3>
<p>
Reply to notices like IP Violation Notice, cheque bounce notice, NRI, Immigration Services and Drafting of Legal Documents, Agreements like vendor engagement agreement, confidentiality.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/hr-and-legal.png" /></div>
<div class="info">
<h3 class="title">Labour Laws & Payroll</h3>
<p>
Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="popular-boxes-devider">
<div class="effect2 box">
<div class="icon">
<div class="image"><img src="images/icon/funding-and-restructuring.png" /></div>
<div class="info">
<h3 class="title">Funding & Restructuring</h3>
<p>
Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees.
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
#Inderjeet just put
.box > .icon > .info {
height: 25em;
}
or some value that fit you and fix the inside p accordingly
Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.
.html:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
.css
.first{
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second{
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
It's tricky to answer as you haven't specified what you mean by "too small" or how big your current image is. The smallest device is probably an old iPhone (320px). The following works for 320px but not below as the margin-left here is in pixels (percentage would be ideal). There is a jsbin here
.first {
font-family: Cinzel;
color: black;
font-size: 45px;
font-weight: normal;
}
.second {
font-family: Cinzel;
color: black;
font-size: 20px;
font-weight: normal;
}
#media screen and (max-width:320px) {
.first {
font-size: 16px;
text-align: center;
vertical-align: middle;
left: 0!important;
margin-left: -300px;
color: white;
}
.second {
font-size: 10px;
text-align: center;
vertical-align: middle;
margin-left: -300px;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9 col-md-6">
<img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-3 col-md-6">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
You could use media queries to get text over the image. Override position attribute as it is shown here How to position text over an image in css
Also, there is no need to use col-xs-9 and col-xs-3. You can use col-xs-12. Atleast col-xs-3 is not needed (col-xs-9 is a choice).
Something similar to this (not tested):
<div class="container-fluid cntr">
<div class="row">
<div class="col-xs-12 col-md-6 image1">
<img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
</div>
<div class="col-xs-12 col-md-6 text1">
<div class="first">
NAME HERE
</div>
<div class="second">
DEVELOPER
</div>
</div>
</div>
</div>
#media screen and (max-width: 767px) {
.cntr {
position: relative;
}
.image1 {
position: absolute;
left: 0;
top: 0;
}
.text1 {
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
}
Theres a problem I have throughout my site and I'm unsure how to solve it. When I try to add padding or margins to certain elements they just don't work.
Here is a jsfiddle of part of the site that isn't responding to the css.
https://jsfiddle.net/a90sns1c/
I am trying to add padding to the top of .banner-sub but the padding just overlaps the above elements not pushing it down.
css:
#banner-wrap{
text-align: center;
}
.banner-title{
padding-top: 75px;
padding-bottom: 40px;
color:#fff;
font-size: 42px!important;
}
.banner-icons{
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
}
#anchor-icon{padding-bottom: 30px;}
html:
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<h1 class="banner-title">Quality assurance through planning<br /><span class="banner-sub">Nationwide leaflet distribution and sample delivery</span></h1>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US</div>
<div id="anchor-icon"><img src="images/down-icon.png" /></div>
</div>
</div>
</div>
Add display:inline-block to .banner-sub class.
.banner-sub {
display: inline-block;
font-family: "Hind",sans-serif !important;
font-size: 24px !important;
font-weight: 400;
padding-top: 200px;
}
jsfiddle
Set display:block; or dispaly:inline-block. <span>is a inline element.
CSS
.banner-sub{
display:block;
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
DEMO HERE
You are applying class .banner-sub on span which is an inline element , as your class .banner-sub does not have any display property set in it , by default display:inline will be set on span as its an inline element.width padding margin wont apply on inline elements (if you are wondering why please see this What is inline , block and Inline-block in css.)
Now for your problem what you can do. i would suggest couple of changes instead of quick-fix (using inline-block) on span.
As i see in you above code you have used h1 tag (default font-size:24px;) but you override it with font-size 42px in your css. so you dont really need h1 here ,instead of using h1 tag use a div and put another div inside instead of span that should be the proper way considering your scenario. posting your code with all the suggested changes.
#banner-wrap {
text-align: center;
}
.banner-title {
padding-top: 75px;
padding-bottom: 40px;
color: #ccc;
font-size: 42px!important;
}
.banner-icons {
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button {
padding-bottom: 50px;
}
#banner-content {
background-image: url('../images/banner.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-sub {
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top: 200px;
}
#anchor-icon {
padding-bottom: 30px;
}
<div id="banner-wrap">
<div id="banner" class="container">
<!-- <div class="banner-bg-img">
<img src="images/banner.png" />
</div>-->
<div id="banner-content">
<div class="banner-title">Quality assurance through planning
<div class="banner-sub">Nationwide leaflet distribution and sample delivery</div>
</div>
<div class="section group banner-icons">
<div class="col span_1_of_4">
<img src="images/icon1.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon2.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon3.png" />
</div>
<div class="col span_1_of_4">
<img src="images/icon4.png" />
</div>
</div>
<div id="banner-button"> WHY CHOOSE US
</div>
<div id="anchor-icon">
<a href="#">
<img src="images/down-icon.png" />
</a>
</div>
</div>
</div>
</div>
Span element has display:inline by default so padding does not effect it. You have to give display:inline-block or display: block the element(.banner-sub).
#banner-wrap{
text-align: center;
}
.banner-title{
position:absolute;
padding-top: 75px;
padding-bottom: 40px;
color:#ccc;
font-size: 42px!important;
}
.banner-icons{
position:absolute;
width: 780px;
margin: 0 auto!important;
padding-bottom: 50px!important;
}
#banner-button{padding-bottom: 50px;
}
#banner-content{
background-image:url('../images/banner.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.banner-sub{
font-size: 24px!important;
font-family: 'Hind', sans-serif!important;
font-weight: 400;
padding-top:200px;
}
#anchor-icon{padding-bottom: 30px;}
I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>
Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.
Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)