how to inline two border - html

this is my code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body, html, #app, .Main {
height: 100%;
}
.Main {
display: flex;
overflow: hidden;
}
.side-bar {
display: flex;
flex-direction: column;
flex-basis: 80px;
align-items: center;
margin: auto 0;
height: 98%;
box-shadow: 2px 0 2px -1.8px rgb(0, 0, 0, 0.4);
}
.side-bar .icon {
font-size: 40px;
}
.side-bar .icon:first-child {
text-align: center;
padding-bottom: 20px;
width: 85%;
border-bottom: 1.5px solid rgb(0, 0, 0, 0.4);
}
.side-bar .icon:not(:first-child) {
margin-top: 20px;
}
.side-bar .icon:last-child {
margin-top: auto;
}
.side-bar .active {
color: rgb(0, 255, 170, 0.7);
}
.top-bar {
display: flex;
flex-direction: row;
height: 72.4px;
justify-content: center;
margin:0 auto;
width: 95.1%;
border-bottom: solid 2px rgb(0, 0, 0, 0.4);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
<div class="Main">
<div style="display: flex; width: 100%;">
<div class="side-bar">
<i class="fad fa-home-alt icon"></i>
<i class="fad fa-th-large icon"></i>
<i class="fad fa-keyboard icon"></i>
<i class="fas fa-folder icon active"></i>
<i class="fad fa-power-off icon"></i>
</div>
<div class="top-bar">
<i class="side-bar fad fa-home-alt icon"></i>
<i class="side-bar fad fa-th-large icon"></i>
<i class="side-bar fad fa-keyboard icon"></i>
<i class="side-bar fas fa-folder icon active"></i>
<i class="side-bar fad fa-power-off icon"></i>
</div>
</div>
</div>
</div>
</body>
</html>
and this is what i spec to happen:
it's working but the problem is when i zoom in or out the borders width and position change, like this:
how can i change the borders width and position that when i zoom in or out the borders width and position does't change and get the same result as the first image.


just add margin-top to .side-bar .icon:first-child :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body, html, #app, .Main {
height: 100%;
}
.Main {
display: flex;
overflow: hidden;
}
.side-bar {
display: flex;
flex-direction: column;
flex-basis: 80px;
align-items: center;
margin: auto 0;
height: 98%;
box-shadow: 2px 0 2px -1.8px rgb(0, 0, 0, 0.4);
}
.side-bar .icon {
font-size: 40px;
}
.side-bar .icon:first-child {
text-align: center;
padding-bottom: 20px;
width: 85%;
border-bottom: 1.5px solid rgb(0, 0, 0, 0.4);
margin-top: 8px;
}
.side-bar .icon:not(:first-child) {
margin-top: 20px;
}
.side-bar .icon:last-child {
margin-top: auto;
}
.side-bar .active {
color: rgb(0, 255, 170, 0.7);
}
.top-bar {
display: flex;
flex-direction: row;
height: 72.4px;
justify-content: center;
margin:0 auto;
width: 95.1%;
border-bottom: solid 2px rgb(0, 0, 0, 0.4);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
<div class="Main">
<div style="display: flex; width: 100%;">
<div class="side-bar">
<i class="fad fa-home-alt icon"></i>
<i class="fad fa-th-large icon"></i>
<i class="fad fa-keyboard icon"></i>
<i class="fas fa-folder icon active"></i>
<i class="fad fa-power-off icon"></i>
</div>
<div class="top-bar">
<i class="side-bar fad fa-home-alt icon"></i>
<i class="side-bar fad fa-th-large icon"></i>
<i class="side-bar fad fa-keyboard icon"></i>
<i class="side-bar fas fa-folder icon active"></i>
<i class="side-bar fad fa-power-off icon"></i>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How to align font awesome and text using flex box

I'm doing some homework and I'm trying to reproduce this
right here
this is my code
<div class="filterbar">
<p>Filtres</p>
<button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button>
<button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button>
<button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button>
<button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button>
</div>
CSS right here
.filterbar{
display: flex;
max-width: 1100px;
margin: 0 auto;
overflow: auto;
}
.filterbar p {
font-weight: bold;
font-size: 18px;
margin-top: 10px;
margin-right: 20px;
}
.buttonfilter{
display: flex;
align-items: stretch;
height: 50px;
background: none;
border: 4px solid var(--background);
border-radius: 30px;
padding: 0;
}
.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog {
color: var(--primary-color);
background: rgba(0,101,252,0.2);
border-radius: 100px;
}
and the thing is that I can't align the font awesome icon and the text, and the background of the font awesome is so strange I really don't understand

I have litte modified your code:
.filterbar{
display: flex;
max-width: 1100px;
width: 1100px;
margin: 0 auto;
overflow: auto;
justify-content: space-between;
}
.filterbar p {
font-weight: bold;
font-size: 18px;
margin-top: 10px;
margin-right: 20px;
}
.buttonfilter{
display: flex;
align-items: stretch;
height: 50px;
background: none;
border: 4px solid var(--background);
border-radius: 30px;
padding: 0;
align-items: center;
border: 1px solid #333;
padding-right: 10px;
}
.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog {
color: var(--primary-color);
background: rgba(0,101,252,0.2);
border-radius: 100px;
padding: 10px;
margin-right: 10px;
width: 35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="filterbar">
<p>Filtres</p>
<button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button>
<button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button>
<button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button>
<button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button>
</div>

To show the fontawsome Icons you need to put in the source like this:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous
This worked for me:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<i class="fas fa-money-bill-wave fa-2x"></i><button>Economique</button>
<i class="fas fa-child fa-2x"></i>
<button>Famillial</button>
<i class="fas fa-heart fa-2x"></i>
<button>Romantique</button>
<i class="fas fa-dog fa-2x"></i>
<button>Animaux autorise</button>
I think at this point you can adjust it yourself :)

how to remove white space to the right of flexbox container?

I'm trying to use flexbox to create a responsive layout of a product list page but this code leaves a lot of whitespace to the right of the page, ive tried using justify-content:space-between but that did not work as well. Adding overflow:hidden to .container class did nothing as well.
edit:someone said it works fine on their end but this is how
my screen looks
*{
margin:0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
transition: all .2s linear;
}
body{
overflow-x: hidden;
}
.container{
min-height: 100vh;
display:flex;
flex-direction: row;
justify-content:center;
flex-wrap: wrap;
padding: 40px 0;
}
.card{
height:500px;
width:280px ;
overflow: hidden;
position: relative;
align-self: center;
margin: 40px;
}
.card img{
width: 100%;
height: 80%;
object-fit: cover;
}
.card .info
{
text-align: center;
line-height: 25px;
}
.card .info .stars i
{
color: gold;
padding: 10px 0;
}
.card .info .price{
font-size: 20px;
color:#f00333;
letter-spacing: 1px;
}
.card .info h3{
color: #333;
padding-top: 5px;
}
.card .discount
{
position: absolute;
top:15px;
left:15px;
height:50px;
width:50px;
display: grid;
background-color: rgba(255, 0, 0, 0.6);
color:#fff;
font-weight: bold;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.card .panel
{
position: absolute;
top:15px;
right: -50%;
width: 45px;
background: rgba(255, 255, 255, 0.644);
display: flex;
align-items: center;
flex-flow: column;
}
.card:hover .panel{
right: 15px;
opacity: 1;
}
.card button
{
position: absolute;
left:50%;
bottom: 0%;
height: 40px;
width: 140px;
border: none;
outline:none;
background: rgba(0,0,0,0.6);
color:#fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transform: translateX(-50%);
opacity: 0;
transition-delay: .2s;
}
.card:hover button{
opacity: 1;
bottom: 25%;
}
.card button:hover{
background: (255,0,0,0.6);
}
.card .panel a{
font-size: 20px;
color: #333;
margin: 15px 0;
}
.card .panel a:hover{
color: rgba(255,0,0,0.9);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
</div>

It Works Fine.
In Your Browser do a hard refresh.
I hope it will do the job done.
Hard Refresh : Ctrl + F5
Click here. It are some docs on hard Refresh If you want to know more.
Or If Nothing Works use position : absolute or Bootstrap.

Responsive text field with icons and counter field

I am trying to create an input field where user can increment or decrement the number. The input field should look like following design in a responsive way
However, it looks weird when I did the following way
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div class="input-with-icon">
<div class="labelled-input">
<div class="labelling">
<div class="content">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-wrapper">
<p class="adult">Adult</p>
<p>16+year</p>
</div>
</div>
</div>
<div class="augment">
<i class="fa fa-minus"></i>
</div>
<input type="text" class="input" disabled/>
<div class="augment">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
Here is the demo
https://jsbin.com/fiwabararo/edit?html,css,output

Please check this code snippet
function counter(i){
var el =document.getElementsByClassName('input');
(i == '+')
? el[0].value = parseInt(el[0].value) + 1
: el[0].value = parseInt(el[0].value) - 1;
}
.input-with-icon {
position: relative;
width: 100%;
display: flex;
}
.labelled-input {
position: relative;
font-weight: 400;
font-style: normal;
display: inline-flex;
border: solid 1px #99acbd;
border-radius: 2px;
background:#eceef2;
}
.labelling {
display: inline-block;
line-height: 1;
vertical-align: baseline;
background-image: none;
color: rgba(0, 0, 0, 0.6);
text-transform: none;
font-weight: 700;
border: 0 solid transparent;
flex: 0 0 auto;
margin: 0;
}
.labelling:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.content {
display: flex;
align-items: center;
padding:0 12px
}
.augment {
background: #ccd5de;
text-align:center;
cursor: pointer;
height: 40px;
width: 40px;
border-radius: 50%;
margin: 10px;
margin-top:18px
}
.augment:hover {
background: #478dcf;
}
.augment i {
line-height:2.6;
color:#fff
}
.input {
margin: 0;
border: none;
outline: 0;
box-shadow: none;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.input:disabled {
background: #fff;
}
#media(max-width:480px){
.input {
width:56%;
}
.augment {
width: 14%;
}
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div class="input-with-icon">
<div class="labelled-input">
<div class="labelling">
<div class="content">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
<div class="text-wrapper">
<p class="adult">Adult</p>
<p>16+year</p>
</div>
</div>
</div>
<div class="augment" onclick="counter('-')">
<i class="fa fa-minus"></i>
</div>
<input type="text" class="input" disabled value="0" />
<div class="augment" onclick="counter('+')">
<i class="fa fa-plus"></i>
</div>
</div>
</div>

Bootstrap- elements overlap on extra small size

I have recent-posts div that show two post with their images and text. after recent-posts I have another div contact-us that contain an image and some text. My issue appear in extra-small size where recent-posts posts go under contact-us part. How can I fix that? The following is my codes and JsFiddle.
HTML:
<div id="recent-posts" class="center-block row">
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post1.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
</div>
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post2.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
</div>
</div>
</div>
<div id="contact-us" class="row">
<div class="col-md-12 col-xs-12">
<img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
<div id="contact-us-text">
<p>sdkf,sd,kfnds,nf,d.....</p>
<p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
<button class="btn btn-success pull-left">124234234</button>
</div>
</div>
</div>
Css:
#recent-posts{
height: 350px;
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
.posts{
display: flex;
flex-direction: column;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
padding: 0;
margin-left: 20px;
margin-right: 20px;
}
.posts img{
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
position: absolute;
background-color: #01a89e;
width: 50%;
color: #101010;
cursor: auto;
margin-top: -17px;
margin-right: 25%;
}
.posts .btn-success:active{
background-color: #01a89e;
color: #101010;
box-shadow: none;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: auto;
overflow: hidden;
}
.img-hover{
position: relative;
}
.post-icon{
color: rgba(255, 255, 255, 1);
transform: rotate(45deg);
opacity: 1;
}
.post-icon span{
transform: rotate(-45deg);
font-size: 12px;
position: absolute;
left: 50%;
top: 0.6em;
margin-left: -7px;
color: #101010;
font-weight: bold;
}
.fa-heart{
color: red !important;
}
#contact-us{
height: 200px;
margin-bottom: 30px;
box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666;
position: relative;
padding: 0;
overflow: hidden;
}
#contact-us-text{
position: absolute;
top: 20%;
left: 12%;
}
#contact-us-text p{
color: white;
}
#contact-us-text .btn-success{
background-color: #01a89e;
cursor: auto;
}
#contact-us-text .btn-success:active{
background-color: #01a89e;
box-shadow: none;
}
JsFiddle

Recent-posts class has a fixed height.
#recent-posts{
height: 350px; // THIS LINE IS THE REASON!
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
Updated fiddle

How can I stretch this nav link in flexbox? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have little problem with flexbox that I don't really understand. How can I stretch the sidebar last link to be the same height as the content boxes?
Explanation image: http://postimg.org/image/f3zsn6051/
Demo:
$(document).ready(function(){
$( ".search-btn" ).click(function() {
$( ".search-bar" ).toggleClass( "hidden" );
});
$( ".add-task-btn" ).click(function() {
$( ".add-task-bar" ).toggleClass( "hidden" );
});
$( ".main-section" ).click(function() {
$( ".details" ).toggleClass( "hidden" );
});
$( "#clandar, .set-due-date" ).hover(function() {
$( ".set-due-date" ).toggleClass( "hidden" );
});
})
* {
box-sizing: border-box;
}
body{
color: #fff;
position: relative;
left: 0;
right: 0;
z-index: 0;
font-family: 'Open Sans', sans-serif;
}
body:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
background: url(../img/bg-1.jpeg) no-repeat center center;
background-size: cover;
height: 100%;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
a{
text-decoration: none;
}
.fa-star,.fa-map-marker {
color: #9596a4;
}
.container{
width: 600px;
margin: 15px auto;
overflow: hidden;
position: relative;
}
.hidden{
display: none;
}
/**********************************
* Grid
**********************************/
[class*="col-"] {
float: left;
}
.row:after {
content: "";
clear: both;
display: block;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-off-2 > .col-2{width: 11.66%;}
.col-off-10 > .col-10{width: 88.33%; }
/**********************************
* Tiltle bar
**********************************/
header{
background-color: rgba(255, 255, 255, 0.3);
text-align: center;
position: relative;
}
.header-bar-buttons {
float: left;
margin: 18px;
}
.header-bar-buttons a {
width: 11px;
height: 11px;
float: left;
margin: 0 2px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
}
.header-all-tasks {
display: inline-block;
margin: 35px 0 10px 0;
font-size: 18px;
color: #ffffff;
}
.header-btn {
float: right;
margin: 35px 16px 10px 0;
}
.header-btn span {
color: rgba(255, 255, 255, 0.5);
margin: 0 8px;
}
/**********************************
* Navigation
**********************************/
.centred-menu{
position: relative;
top: 40%;
left:40%
}
.centred-inv-menu{
position: relative;
top: 80%;
left:40%
}
.menu a{
text-decoration: none;
display: block;
color: #CFC4CD;
}
.nav-btn-1{
background-color: #55566e;
height: 70px;
}
.nav-btn-2{
background-color: #ff5f65;
height: 70px;
}
.nav-btn-3{
background-color: #fdcd63;
height: 70px;
}
.nav-btn-4{
background-color: #d575f8;
height: 70px;
}
.nav-btn-5{
background-color: #00eeb8;
height: 70px;
}
.nav-inv-btn{
background-color: rgba(52, 63, 70, 0.5);
}
/**********************************
* Task list global classes
**********************************/
.task-link{
color: #ffffff;
}
.checkbox{
display: flex;
align-items: center;
justify-content: center;
background-color: #4c4b62;
border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.box {
border-bottom: 1px solid rgba(233, 233, 233, 1);
background-color: #55566E;
}
.inv{
opacity: 0.6;
}
.flex-height{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/**********************************
* Main taks
**********************************/
.box h1{
clear: both;
font-size: 44px;
margin: 35px 0 0;
color: #ffffff;
}
.task-1{
border-right: 10px solid #ff5f65;
border-bottom: 1px solid rgba(233, 233, 233, 1);
}
/**********************************
* small-task
**********************************/
.task-content-small{
padding: 25px 30px 15px 30px;
}
.location-and-date-small{
margin: 0;
font-size: 10px;
}
.task-name {
margin: 23px 0 0;
line-height: 1.5;
font-size: 15px;
}
/**********************************
* seconday-section
**********************************/
.task-content {
padding: 25px 35px 15px 25px;
position: relative;
}
.favourite {
float: right;
}
.location-and-date {
color: #9596a4;
float: left;
font-weight: bold;
font-size: 12px;
margin: 5px;
}
.location-and-date-small {
margin: 0;
font-size: 10px;
}
/**********************************
* color
**********************************/
.active{
border-left: 1px solid #ff5f65;
border-bottom: 1px solid white;
border-right: 10px solid #fdcd63;;
}
.purple{
border-right: 10px solid #d575f8;
}
.inv-red{
border-right: 10px solid #ff5f65;
}
.inv-purple{
border-right: 10px solid #9B79AB;
}
.inv-yell{
border-right: 10px solid #C2B28A;
}
.green{
border-bottom: 1px solid rgba(233, 233, 233, 1);
border-right: 10px solid #00eeb8;
height: 153px;
}
.green-top{
border-top: 10px solid #00eeb8;
}
/**********************************
*Search bar
**********************************/
.search-bar, .add-task-bar {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10;
padding: 30px;
text-align: left;
}
.search-bar input {
width: 90%;
background-color: rgba(255, 255, 255, 0);
border: none;
color: #fff;
font-size: 30px;
margin: 0 0 0 15px;
}
.search-bar span {
color: rgba(255, 255, 255, 0.5);
}
/**********************************
*Add Task
**********************************/
.add-task-bar {
padding: 0;
}
.add-new-task {
color: rgba(255, 255, 255, 0.8);
vertical-align: middle;
padding: 30px;
}
.add-new-task:last-child {
background-color: rgba(0, 0, 0, 0.4);
}
.add-new-task a {
color: rgba(255, 255, 255, 0.5);
}
.add-new-task h2 {
font-weight: normal;
font-size: 29px;
float: left;
margin: 0
}
.add-new-task p {
float: left;
margin: 10px 0;
}
.add-new-task div {
float: right;
}
.select-category-icons a {
margin: 23px;
border-radius: 50%;
position: relative;
display: inline-block;
padding: 13px;
}
.add-task-icons {
margin: 10px 0;
}
.add-task-icons a {
margin: 0 8px;
}
.category-button {
color: #ff5f65;
}
.close-button {
color: rgba(255, 255, 255, 0.8);
}
.selected-arrow-add-task::before {
top: 49px;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 13px solid rgba(0, 0, 0, 0.4);
}
.home-button{
background-color: #ff5f65 ;
}
.briefcase-button{
background-color: #C2B28A;
}
.screen-button{
background-color: #D575F8;
}
/**********************************
*Task detiles Add
**********************************/
.task-details {
position: absolute;
top: 69px;
bottom: 0;
right: 0;
background-color: #55566e;
z-index: 20;
}
.task-details-border{
border-bottom: 1px solid #9596a4;
}
.checkbox-empty{
background-color: #55566e;
display: flex;
align-items: center;
justify-content: center;
}
.task-details-block a {
text-decoration: none;
color: #9596a4;
}
.task-details p {
font-weight: bold;
font-size: 12px;
}
.paperclip {
position: absolute;
bottom: 20px;
right: 20px;
}
.upper-content::after {
height: 10px;
width: 100%;;
}
.task-content-details {
padding: 20px 20px 20px 10px;
}
.task-content-details-small {
padding: 0 0 0 10px;
}
.teal-content {
color: #00eeb8;
}
/**********************************
*Clander
**********************************/
.set-due-date {
position: absolute;
right: 0%;
top: 15%;
background-color: #fff;
color: #4f5064;
text-align: center;
}
.back-ground-inv {
position: absolute;
top: 12%;
bottom: 0;
right: 300px;
background-color: rgba(85, 86, 110, 0.57);
z-index: 20;
/* opacity: 0.7; */
}
.prev-next-month {
color: #cfcfd3;
}
.calendar-controls,
.calendar-header {
background-color: #ecedf7;
padding: 10px;
}
.calendar-controls span {
margin: 0 5px;
font-weight: bold;
}
.calendar-header {
border-left: 11px solid #ecedf7;
border-right: 11px solid #ecedf7;
}
.calendar-body {
border-bottom: 11px solid #fff;
border-left: 11px solid #fff;
border-right: 11px solid #fff;
border-top: 12px solid #fff;
}
.calendar {
font-size: 11px;
}
.calendar td {
padding: 7px;
}
.calendar th {
text-transform: uppercase;
padding: 0 5px 10px 5px;
font-size: 9px;
}
.cell-border,
.cell-background {
border-radius: 50%;
padding: 3px;
}
.cell-border {
border: 1px solid red;
}
.cell-background {
background-color: #dce0e4;
}
.selected-arrow-details::before {
left: 0;
top: 45%;
border-top: 5px solid transparent;
border-left: 6px solid #fff;
border-bottom: 5px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="row">
<div class="col-12">
<div class="header-bar-buttons">
</div>
<div class="hidden search-bar">
<span class="fa fa-search fa-2x"></span>
<input type="text" name="search" value="" autofocus="">
</div>
<div class="hidden add-task-bar">
<div class="add-new-task clearfix">
<h2>Add a new task</h2>
<div class="add-task-icons">
<span class="fa fa-star-o fa-lg"></span>
<span class="fa fa-calendar fa-lg"></span>
<span class="fa fa-circle fa-lg category-button"></span>
</div>
</div>
<div class="add-new-task clearfix">
<p>
Select a category
</p>
<div class="select-category-icons">
<span class=" fa fa-home"></span>
<span class=" fa fa-briefcase"></span>
<span class=" fa fa-desktop"></span>
<span class=" fa fa-users"></span>
</div>
</div>
</div>
<h3 class="header-all-tasks">All tasks</h3>
<div class="header-btn">
<span class="fa fa-search fa-lg search-btn"></span>
<span class="fa fa-plus-circle fa-lg add-task-btn"></span>
</div>
</div>
</header>
<main class="row col-off-2 col-off-10">
<nav class="menu col-2">
<span class="centred-menu nav-icon fa fa-inbox fa-lg"></span>
<span class="centred-menu nav-icon fa fa-home fa-lg"></span>
<span class="centred-menu nav-icon fa fa-briefcase fa-lg"></span>
<span class="centred-menu nav-icon fa fa-desktop fa-lg"></span>
<span class="centred-menu nav-icon fa fa-users fa-lg"></span>
<span class="centred-inv-menu nav-icon fa fa-cog fa-lg"></span>
</nav>
<article class="col-10 autoheight">
<section class="main-section flex-height row">
<div class="checkbox col-1 ">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class=" task-content box col-11 task-1">
<p class="location-and-date"><span class="fa fa-map-marker fa-lg"></span> At Tesco | Next monday</p><span class="fa fa-star"></span>
<h1>Buy a new better toothbrush</h1>
</div>
<section class="details hidden row">
<div class="col-6 back-ground-inv">
<div class="set-due-date hidden">
<div class="calendar-controls">
<span><</span>
<span>September</span>
<span>></span>
</div>
<table class="calendar">
<thead class="calendar-header">
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
</thead>
<tbody class="calendar-body">
<tr>
<td class="prev-next-month">24</td>
<td class="prev-next-month">25</td>
<td class="prev-next-month">26</td>
<td class="prev-next-month">27</td>
<td class="prev-next-month">28</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td class="prev-next-month">1</td>
<td class="prev-next-month">2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6 task-details">
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty green-top task-details-border">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class=" task-content-details green-top">
<h2>Buy a new toothbrush</h2>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>
<div id="clandar" class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class="centered fa fa-calendar fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Set a due date</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border flex-height">
<span class=" fa fa-clock-o fa-lg"></span>
</div>
<div class="col-11 task-details-border flex-height">
<div class="task-content-details-small task-content-details">
<p>Set a reminder</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class=" teal-content fa fa-circle fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Work</p>
</div>
</div>
</div>
<div class="task-details-block flex-height">
<div class="col-1 checkbox-empty task-details-border ">
<span class=" fa fa-edit fa-lg"></span>
</div>
<div class="col-11 task-details-border">
<div class="task-content-details-small task-content-details">
<p>Add note</p>
</div>
</div>
</div>
<div class="paperclip">
<span class="fa fa-paperclip fa-lg"></span>
</div>
</div>
</section>
</section>
<section class="seconday-section row">
<section class="a-side col-6">
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small active box small-box col-10">
<p class="location-and-date location-and-date-small">Tomorrow</p>
<p class="task-name">Clean my roomm</p>
</div>
</div>
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 purple">
<p class="location-and-date location-and-date-small">18. September 2013</p>
<p class="task-name"><a href="#" class="task-link">Do a homework from ipsum dolor amet,
consectetur adipiscing</a></p>
</div>
</div>
<div class="left-task flex-height inv">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-red">
<p class="location-and-date location-and-date-small">Yesterday</p>
<p class="task-name">Buy a milk</p>
</div>
</div>
</section>
<section class="b-side col-6">
<div class="left-task flex-height">
<div class="checkbox col-2">
<span class="centered fa fa-circle-thin fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 green">
<p class="location-and-date location-and-date-small">14. September 2013</p>
<p class="task-name"><a href="#" class="task-link">Clean the house and mauris pretium purus
id sapien consectetur</a></p>
</div>
</div>
<div class="left-task inv flex-height">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-purple">
<p class="location-and-date location-and-date-small">5. October 2013</p>
<p class="task-name">5. October 2013</p>
</div>
</div>
<div class="left-task inv flex-height">
<div class="checkbox col-2">
<span class=" fa fa-check-circle fa-lg"></span>
</div>
<div class="task-content-small box small-box col-10 inv-yell">
<p class="location-and-date location-and-date-small">5. October 2013</p>
<p class="task-name">Call to Jakub Antalik</p>
</div>
</div>
</section>
</section>
</article>
</main>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CodePen

You need to make a few adjustments.
I'm using inline styles for demo purposes only.
First, define a height for the container:
<main class="row col-off-2 col-off-10" style="height: 529px;">
I've used 529px because that is the natural height of the element.
Second, make the nav element a flexbox with a column direction, and height equal to container height:
<nav class="menu col-2" style="display: flex; flex-direction: column; height: 100%;">
You may need to tinker with the height. If 100% isn't precise, try 93.5%.
Third, use the flex-grow property to tell the last nav item to take all available space.
<a href="#" class="nav-inv-btn autoheight" style="flex-grow: 1;">
DEMO: http://codepen.io/anon/pen/rOjdYg