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>
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}
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 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 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/