Dynamically widening a div based on content - html

Question

I'm trying to recreate this
My current code is this
The issue is that I want the balance div to stretch as the balance gets bigger, as currently it exceeds its bounds and is shifted underneath, other small issues about appearance are present too!
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 75%;
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: initial !important;
height: initial !important;
font-size: 1em;
float: right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<i class="sign out icon"></i>
<div class="balance">
<span class="funds">$<span class="value">4.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>

Answer 1

I think I have managed to achieve what you want using display:table and display:table-cell. The plus icon is set to a fixed width but if the value gets larger it will expand the div.
I have also removed some of the floats and switched them to display:inline-block so they can be aligned vertically. I have changed the HTML very slightly by adding some additional wrappers.
You might want to implement the changes in to your main stylesheet because currently I am just overriding your styles at the bottom of the stylesheet.
https://codepen.io/anon/pen/jwyXMM

Answer 2

You can use display:inline-block; so that your content fits properly in the balance div.
</style><style type="text/less">
#HeaderHeight: 150px;
#HeaderMargin: #HeaderHeight / 4;
#Color: #ff003c;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
div.header {
width: 100%;
height: #HeaderHeight;
background: #333;
div.profile-right {
float: right;
img.avatar {
float: right;
margin: #HeaderMargin #HeaderMargin #HeaderMargin 10px;
height: #HeaderHeight / 2;
width: #HeaderHeight / 2;
border-radius: 100%;
}
div.data {
float: right;
display: table;
height: #HeaderHeight;
color: #FFF;
div.container {
display: table-cell;
vertical-align: middle;
width:200px;
span.username {
font-size: 1.2em;
display: block;
}
div.info {
width: 100%;
font-size: 1.2em;
display: inline-block;
i.sign.out.icon {
margin: 0;
font-size: 1.2em;
line-height: 1em;
float: right;
width: 15%;
}
div.balance {
border-width: 10px;
font-size: 1.2em;
border: 2px #Color solid;
border-radius: 10px;
width: 100%;
display:inline-block;
span.value{
font-size:1em;
width:70%;
}
span.funds {
font-size: 1em;
text-align: left;
margin-left: 4px;
}
i.add.icon {
width: 25% !important;
height: initial !important;
font-size: 1em;
float:right;
margin: 1px 5px;
color: #000 !important;
background-color: #Color !important;
padding: 1px !important;
}
}
}
}
}
}
}
div.page-content {
width: 100%;
height: calc(~"100%" - #HeaderHeight);
background: black;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div class="header">
<div class="profile-right">
<img src="http://placehold.it/184x184" class="avatar">
<div class="data">
<div class="container">
<span class="username">Username</span>
<div class="info">
<div class="balance">
<i class="sign out icon"></i>
<span class="funds">$<span class="value">5333.20</span></span>
<i class="circular inverted add icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
I have also moved (i.sign.out.icon) sign out icon within the balance div and made width of balance div to 100% so that everything stays on same line and fits properly.