I am making a chat script with the possibility to minimize the particular chat and I can't seem to figure out how to make the header of the div push down! Is there a way to do this?? I researched this and was unable to find a way to get the results I want.
my HTML code is as follows
<?php
$usrid = "Joel";
?><!DOCTYPE html>
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="css/style.css">
<SCRIPT SRC="js/jquery-2.1.1.min.js"></SCRIPT>
<SCRIPT>
function onTestChange() {
var key = window.event.keyCode;
// If the user has pressed enter
if (key == 13) {
event.preventDefault();
post();
}
else {
return true;
}
}
function post()
{
document.getElementById('txtArea').value = "";
}
</SCRIPT>
</HEAD>
<BODY><?php
$file = simplexml_load_file("xml/joel.xml");
echo"
<DIV CLASS=\"chatbox\">
<DIV CLASS=\"title\">
<SPAN CLASS=\"name\">
$file->subject
</SPAN>
<SPAN CLASS=\"buttons\">
<BUTTON ONCLICK=\"minimize()\" NAME=\"Minimize\" ID=\"min\">-</BUTTON><BUTTON ONCLICK=\"close()\" NAME=\"Close\">x</BUTTON>
</SPAN>
</DIV>
<DIV ID=\"body\" CLASS=\"hidden\">
<DIV CLASS=\"history\">";
foreach($file->post as $post)
{
if($post->auth == $usrid)
{
echo"
<DIV CLASS=\"self\">
<DIV CLASS=\"self_left\">
$post->content
</DIV>
<DIV CLASS=\"self_right\">
$post->auth
</DIV>
</DIV>
";
}
else
{
echo"
<DIV CLASS=\"other\">
<DIV CLASS=\"other_left\">
$post->auth
</DIV>
<DIV CLASS=\"other_right\">
$post->content
</DIV>
</DIV>
";
}
}
echo" </DIV>
<DIV CLASS=\"input\">
<DIV ID=\"input\">
<DIV CLASS=\"text\">
<TEXTAREA NAME=\"input\" ONKEYPRESS=\"onTestChange()\" ID=\"txtArea\"></TEXTAREA>
</DIV>
<DIV CLASS=\"submit\">
<BUTTON SRC=\"images/button1.png\" ONCLICK=\"post()\">Send</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>";
?>
and my css is
::-webkit-scrollbar
{
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track
{
background: url(../images/bg.png);
}
::-webkit-scrollbar-thumb
{
background: rgba(0,0,0,0.5);
border-radius: 25px;
}
.chatbox
{
width: 250px;
margin: 0 auto;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
overflow: hidden;
flex-direction: column;
}
.title
{
width: 100%;
border-bottom: 1px solid black;
display: inline-block;
background: #436ED2;
flex-direction: column;
}
.name
{
width: calc(50% - 10px);
float: left;
text-align: left;
margin-top: 3px;
padding-left: 10px;
}
.buttons
{
width: 50%;
float: right;
text-align: right;
}
.buttons button
{
width: 24px;
height: 24px;
border: none;
background: none;
outline: none;
}
.history
{
width: 90%;
margin: 0 auto;
height: 300px;
border: 1px solid black;
margin-top: 5px;
overflow: auto;
overflow-x: hidden;
}
.self
{
width: 100%;
background: #c6d3f1;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.self_left
{
width: calc(80% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.self_right
{
width: calc(20% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.other
{
width: 100%;
background: #f1d3c6;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.other_left
{
width: calc(20% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.other_right
{
width: calc(80% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.input
{
width: 90%;
margin: 0 auto;
height: 90%;
margin-top: 5px;
}
#input
{
width: 100%;
display: inline-block;
}
textarea
{
resize: none;
width: 75%;
height: 40px;
float: left;
}
.input button
{
float: right;
width: 20%;
height: 46px;
top: 10px;
}
.hidden
{
display: none;
flex-direction: column;
}
I want my div called title to move down when I invoke the script minimize() which I haven't added yet.
You can use flex boxes to achieve this
Take a look at this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will make the divs go up instead of down:
.container {
flex-direction: column-reverse;
}
the easiest method that I discovered after changing the question I was asking that gets the proper results, is very simple
.chatbox
{
position: fixed;
bottom: 0px;
}
that's it
You can use jQuery's .animate() method to zoom each chat div to "minimized" / "maximized" state.
Here is an imperfect example that I just hashed together as a starting point:
jsFiddle Demo
HTML:
<div class="chatBox" id="chat-17">
<div class="chatTitle">
<div class="titleText">This is chat title</div>
<div class="titleMin"> v</div>
</div>
<div class="chatBody">
Chat message goes here
</div>
</div>
jQuery:
$('.titleText').click(function(){
if ( $(this).hasClass('minTitle') ){
$(this).removeClass('minTitle');
$(this).parent().parent().removeClass('minimized');
}else{
$(this).addClass('minTitle');
var cb = $(this).parent().parent();
cb.addClass('minimized');
//cb.animate(function(){top: '150',left: '10'},500);
}
});
css:
.chatBox{width:100%;border:1px solid blue;overflow:hidden;}
.chatTitle{width:100%;height:20px;}
.titleText{width:95%;height:100%;color:white;font-weight:bold;float:left;background:black;}
.titleMin{width:4.5%;height:100%;color:red;font-weight:bold;float:left;text-align:center;background:black;}
.titleMin:hover{cursor:pointer;cursor:hand;}
.chatBody{width:100%;height:150px;padding:10px;background:wheat;}
Additional css added because example didn't work:
.titleText:hover{cursor:pointer;cursor:hand;}
.minimized{height:5px;width:5px;position:absolute;top:150px;}
span{font-weight:bold;color:red;}
Resources:
http://api.jquery.com/animate/
http://viralpatel.net/blogs/understanding-jquery-animate-function/
http://www.tutorialscollection.com/jquery-animate-how-to-animate-in-jquery-using-animate-method/
http://www.1stwebdesigner.com/tutorials/jquery-animation-tutorial/
Related
I'm trying to altar two buttons (Easy, Hard) on a web app I'm building. I am trying to alter them to remove their borders, and when a button is selected, I want to background to flow up into the header as a visual indication for being selected.
Note: I am linking Bootstrap 4 at the moment.
Current Visual:
Desired Visual:
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
}
.selected {
background:#66b0c4;
border: none;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
I hope this can help you.
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
padding-top: 5px;
}
.selected {
background:#66b0c4;
border: 0;
padding: 5px;
position: relative;
}
.selected::before {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 100%;
background-color: #66b0c4;
height: 10px;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
Solved by adjusting the height of background on the selected class. Also solved the selection issue with
*:focus {
outline: 0 !important;
}
CSS Now:
.selected {
background:#66b0c4;
border: none;
height: 30px;
}
*:focus {
outline: 0 !important;
}
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>
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
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.
I have simple div structure, In that I have 7 columns with float: left. I want to apply float: right to the last column by using :last-child, But it is not working.
Below is the HTML and CSS.
<div class="boc-practice-impact-main">
<div class="bocpi-header">Practice Impact</div>
<div class="bocpi-body-main">
<div class="bocpi-column">1</div>
<div class="bocpi-column">2</div>
<div class="bocpi-column">3</div>
<div class="bocpi-column">4</div>
<div class="bocpi-column">5</div>
<div class="bocpi-column">6</div>
<div class="bocpi-column">7</div>
<div class="clearfix"></div>
</div>
</div>
.boc-practice-impact-main {
width: 100%;
background-color: red;
}
.boc-practice-impact-main .bocpi-header {
width: 100%;
background-color: #49bad7;
line-height: 20px;
text-align: center;
margin-top: 3px;
}
.boc-practice-impact-main .bocpi-body-main {
width: 100%;
background-color: #333333;
line-height: 20px;
text-align: center;
margin-top: 3px;
}
.boc-practice-impact-main .bocpi-body-main .bocpi-column {
width: calc(100%/7 - 21px);
background-color: #f4f8fc;
float: left;
margin: 5px 21px 20px 0px;
padding: 5px;
min-height: 200px;
}
.business-outcome-main-div-new .bocpi-body-main .bocpi-column:last-child {
width: calc(100%/7 - 20px);
background-color: #ff0000;
float: right;
margin: 5px 0px 20px 0px;
padding: 5px;
min-height: 200px;
}
Advance thanks for the solution.
No bocpi-column element is the last child of its container.
<div class="clearfix"></div> or <div class="bocpi-body-main"> are.
Your HTML is invalid. If you had used a validator it would have alerted you the many missing </div> tags in your code.
There is no last-child class selector, it will target the last child of the .bocpi-body-main.
In your case you can get around it by deleting the <div class="clearfix"></div> and use a CSS based clear fix, using the pseudo element ::after
.boc-practice-impact-main .bocpi-body-main::after { /* clearfix */
content: '';
display: block;
clear: both;
}
Stack snippets
.boc-practice-impact-main {
width: 100%;
background-color: red;
}
.boc-practice-impact-main .bocpi-header {
width: 100%;
background-color: #49bad7;
line-height: 20px;
text-align: center;
margin-top: 3px;
}
.boc-practice-impact-main .bocpi-body-main {
width: 100%;
background-color: #333333;
line-height: 20px;
text-align: center;
margin-top: 3px;
}
.boc-practice-impact-main .bocpi-body-main::after {
content: '';
display: block;
clear: both;
}
.boc-practice-impact-main .bocpi-body-main .bocpi-column {
width: calc(100%/7 - 21px);
background-color: #f4f8fc;
float: left;
margin: 5px 21px 20px 0px;
padding: 5px;
min-height: 200px;
}
.boc-practice-impact-main .bocpi-body-main .bocpi-column:last-child {
width: calc(100%/7 - 20px);
background-color: #ff0000;
float: right;
margin: 5px 0px 20px 0px;
padding: 5px;
min-height: 200px;
}
<div class="boc-practice-impact-main">
<div class="bocpi-header">Practice Impact</div>
<div class="bocpi-body-main">
<div class="bocpi-column">1</div>
<div class="bocpi-column">2</div>
<div class="bocpi-column">3</div>
<div class="bocpi-column">4</div>
<div class="bocpi-column">5</div>
<div class="bocpi-column">6</div>
<div class="bocpi-column">7</div>
</div>
</div>
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>
I made a chart with html+css (i really need it to work in all browsers)
its ok but the bars are on the top and i need them to stick to the bottom
i tried vertical-align and tried some other things but neither of them worked
Here is a jsfiddle (if you see it you'll know what i mean)
JsFiddle
Code:
CSS:
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
}
.vbottom {
display: block;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
HTML:
<div id="chart">
<div id="scale">
<i>500</i>
<i>450</i>
<i>400</i>
<i>350</i>
<i>300</i>
<i>250</i>
<i>200</i>
<i>150</i>
<i>100</i>
<i>50</i>
<i>0</i>
</div>
<div id="chartwrap">
<div id="chartbox">
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<br class="clear">
</div>
<div id="days">
<i>02-17</i>
<i>02-18</i>
<br class="clear">
</div>
</div>
<div id="description">
<div id="indes"><i></i><span>Received</span><br class="clear"></div>
<div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
</div>
<br class="clear">
</div>
here is your new CSS code :
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
position: relative;
}
.vbottom {
display: block;
position: absolute;
bottom:0px;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
To sum up, I just added position: relative; to the end of .thisday, and I also added position: absolute; and then bottom:0px; to .vbottom.
Also, this method will still work if one day you enlarge your graphic. It will stick to the bottom of your graph and you will not have to reajust from top. If you want the bars to go a pixel more or less from the bottom, just do bottom:-1px; or bottom:1px; instead of 0px and it will be readjusted !
This will make the bars always align along the bottom of the chart. It's a nice solution as long as you don't need to support earlier versions of IE than 8.
.thisday {
display: inline-table;
height: 170px;
margin: 0 18px;
width: 40px;
}
.vbottom {
display: table-cell;
vertical-align: bottom
}
.thisday is the container and has been given display: inline-table, and the area supposed to be in the bottom has display: table-cell and vertical-align: bottom.
EDIT: since .vbottom is not absolutely positioned, width on .thisday can be left out altogether, in case you might want to add more bars per day or so. That's one clear advantage of this method.
Forked fiddle: http://jsfiddle.net/7VvZA/1/
Add position relative for chartbox class:
position: relative;
and position absolute for vbottom class:
position: absolute;
bottom: 0;
UPDATE (I work in devtools and don't save changes here is updated version):
http://jsfiddle.net/QzHzT/2/