Align two elements with CSS - html

Question

I have two elements menu and header/ribbon with user information. menu looks good but ribbon with username not fit into a page very well. Please see my code:
JSFiddle
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
When a screen is wide you can see a big white gap on the right-hand side but when I'm looking this code on a small screen then ribbon overlap. How I can show always 100% width of ribbon menu square need to be in same position and same width

Answer 1

You can change the width of .band to:
width: calc(100% - 97px);
as the width of the menu is fixed to 97px, including the paddings and margins. We can get the left space for the right part by getting the full width - 97px (100% - 97px) by using calc().
Wish that this helped you.

Answer 2

You could do it with CSS flex:
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
display: flex;
}
.menu {
position: relative;
}
.menu ul.active {
display: none;
}
.menu ul {
position: absolute;
top: 90%;
left: 0;
padding: 10px 10em 0em 2em; /* menu width */
border-radius: 7px;
background: #4CAF50;
}
.menu ul:after { /* black triangle position */
width: 0;
height: 0;
position: absolute;
top: 0;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.menu li {
margin: 5px -100px 5px 0px; /* text inside menu width */
float: none;
display: block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display: block;
}
.toggle-nav {
padding: 20px; /* squere element size */
float: left;
display: inline-block;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: #4CAF50;
color: #FFFFFF;
font-size: 25px;
transition: color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none;
color: #FFFFFF;
}
.band {
flex: 0 1 100%;
padding: 14px; /* element size */
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background:#4CAF50;
color: #FFFFFF;
font-size: 17px;
transition: color linear 0.15s;
font-weight: bold;
margin-left: 10px;
}
.ribbon:before {
content: '';
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
JSFiddle

Answer 3

try this one:
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
DEMO HERE