Develop Reference

Why won't my accordion close all the way?

I'm making some accordion FAQ questions. When I add padding around the answer portion, my accordion won't close all the way. When I remove the padding, the accordion works fine. The problem is that I want the padding.
As stated before, my accordion works perfectly fine when padding is removed. When the padding is added back, the collapsed answer still shows the first few lines of text in the answer.
(The accordion in question is the last entry on the page, headed with "0002.")
body {
font-family: 'work sans', Arial, sans-serif;
font-size: 14px;
color: #999;
margin: 0px;
padding: 0px;
background-color: #010101;
background: url(https://imgur.com/YRl8KNP.png) fixed center;
background-size: cover;
text-align: left;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #010101;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #999;
}
#header {
padding: 160px;
}
.h_title {
font: 150px 'work sans';
color: #fff;
margin-left: 45px;
text-transform: uppercase;
}
.h_menu {
border-top: 1px solid #999;
width: 1100px;
margin: 0 auto;
padding: 20px 0px;
margin-bottom: 175px;
}
.h_top {
text-align: right;
font: 12px 'work sans';
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
.h_top::before {
content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
font: 11px 'arial';
font-weight: 400;
display: block;
color: #ff00ff;
margin-bottom: 20px;
letter-spacing: 4px;
}
.h_tabs input {
display: none;
}
.h_tabs {
position: relative;
overflow: hidden;
height: 230px;
margin-top: 30px;
}
.h_tabs label {
position: absolute;
right: 0px;
top: 20px;
font: 9px 'work sans';
letter-spacing: 5px;
color: #fff;
cursor: crosshair;
}
.h_tabs label:nth-of-type(2) {
top: 90px;
}
.h_tabs label:nth-of-type(3) {
top: 160px;
}
.h_tabs label b {
color: #ff00ff;
font-weight: 700;
}
.h_tabs label span {
opacity: 0;
transition: 0.6s;
}
.h_tabs label:after {
content: '001';
display: inline-block;
overflow: hidden;
width: 40px;
text-align: right;
font-eight: 100;
color: #fff;
transition: 0.6s;
font-weight: bold;
}
.h_tabs label:nth-of-type(2):after {
content: '002';
}
.h_tabs label:nth-of-type(3):after {
content: '003';
}
.h_tabs input:checked+label span {
opacity: 1;
transition: 0.6s;
}
.h_tabs input:checked+label::after {
width: 0px;
transition: 0.6s;
}
.h_tab1,
.h_tab2 {
width: 700px;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.h_blurb {
font: 14px 'work sans';
color: #ccc;
letter-spacing: 1px;
}
.h_cont {
background: #171717;
padding: 20px;
margin-top: 25px;
overflow: hidden;
display: inline-block;
}
.h_nav a {
display: inline-block;
position: relative;
width: 180px;
margin: 0px 35px 15px 0px;
border-bottom: 1px solid #333;
padding: 6px;
font: 12px 'share tech mono';
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
}
.h_nav a::after {
content: '';
width: 15px;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background: #ff00ff;
transition: 0.5s;
}
.h_nav a:nth-of-type(2n):after {
background: #ff00ff;
}
.h_nav a:nth-of-type(3n):after {
background: #ff00ff;
}
.h_nav a:hover:after {
width: 180px;
transition: 0.5s;
}
#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
opacity: 1;
z-index: 2;
}
#lean_overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: url(https://i.imgur.com/zdXP0Uo.jpg) fixed center;
background-size: cover;
display: none;
}
#Pages #wrapper {
background: transparent;
}
#page_container {
width: 1100px;
overflow: hidden;
padding: 15px 0px;
margin: 15px 0px;
}
.page_menu {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-left: 12px;
float: left;
}
.page_menu a:active {
color: #ff00ff;
}
.page_menu h1 {
font: 17px 'work sans';
font-weight: 700;
text-transform: lowercase;
color: #fff;
margin: 30px 0px 10px 0px;
}
.page_menu h1:before {
content: '/ ';
font-weight: 300;
margin-right: 5px;
color: #ccc;
}
.page_content {
background: #171717;
width: 705px;
float: left;
outline: 1px solid rgba(255, 255, 255, 0.2);
outline-offset: 10px;
padding: 50px;
text-align: justify;
line-height: 150%;
}
.page_content h1 {
font: 50px 'work sans';
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin: 0px;
overflow: hidden;
text-align: left;
display: block;
letter-spacing: 1px;
}
.page_content h2 {
font: 15px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 10px 0px;
color: #ff00ff;
}
.page_text {
padding: 20px 50px;
}
.page_text u {
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
}
.page_em {
margin: 30px;
font: 10px 'share tech mono';
line-height: 17px;
border: 1px solid #333;
padding: 30px;
}
.page_em u {
color: #ff00ff;
font-style: normal;
font-size: 10px;
letter-spacing: 0px;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.page_menu ol {
counter-reset: item;
margin: 0px;
padding-left: 10px;
}
.page_menu li ol {
padding-left: 15px;
}
.page_menu b {
color: #ff00ff;
font-weight: bold;
}
.page_menu ol li {
display: block;
}
.page_menu li:before {
content: counters(item, ".") ". ";
counter-increment: item;
font-size: 9px;
line-height: 25px;
color: #ff00ff;
}
.sub_canons li {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font: 7px 'work sans';
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0px;
margin-bottom: 10px;
}
.sub_canons {
list-style-type: none;
margin: 30px 0px;
padding-left: 50px;
}
.sub_canons li b {
display: block;
font: 10px 'share tech mono';
}
.page_content h3 {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h3::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
.page_content h4 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h4::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff1053;
}
.page_content h5 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h5::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #4592f7;
}
.page_content h6 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h6::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff5f32;
}
/* Tagging */
a.user-tagged.mgroup-4 {
color: #744dba;
}
a.user-tagged.mgroup-8 {
color: #ff1053;
}
a.user-tagged.mgroup-6 {
color: #4592f7;
}
a.user-tagged.mgroup-7 {
color: #ff5f32;
}
.iconpad {
padding: 10px;
border: 1px solid #222;
margin-right: 10px;
float: left;
margin-top: 5px;
}
.padex {
padding: 10px;
text-align: justify;
}
::-moz-selection {
color: #ff00ff;
}
::selection {
color: #ff00ff;
}
faqentry {
margin: 0px 20px 5px 20px;
display: block;
}
faqentry ol li {
margin: 10px 15px 10px 10px;
padding-left: 15px;
font-size: 9px;
color: #d8fe56;
}
div.toggle {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%!important;
background: rgba(0, 0, 0, 0.3);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
}
div.panel {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%;
background: rgba(0, 0, 0, 0.3);
display: block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
</style>
<link rel="shortcut icon" href="HERE">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
<title>STICTION</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">
</head>
<div id="header">
<div class="h_title">stiction</div>
<div class="h_menu">
<div class="h_top"></div>
<div class="h_tabs">
<input id="htab1" type="radio" name="htabs" checked>
<label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>
<input id="htab2" type="radio" name="htabs">
<label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>
<div class="h_tab1">
<div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
<span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
</div>
</div>
<div class="h_tab2">
<div class="h_nav">
DISCORD
DIRECTORY
PLAYLIST
</div>
</div>
</div>
</div>
<div id="page_container">
<div class="page_menu">
<ol>
<li>INDEX</li>
</ol>
<h1>ESSENTIAL READS</h1>
<ol>
<li>QUICK-START GUIDE</li>
<span style="color: #ff00ff; font-weight: bold;">RULES</span>
<li>HISTORY</li>
<li>SETTING</li>
<li>SPECIES</li>
<ol>
<li>LIVING</li>
<li>DECEASED</li>
<li>PRUGATORIC</li>
</ol>
</ol>
<h1>IN-DEPTH CONTENT</h1>
<ol>
<li>FAQ</li>
<li>SUBPLOTS</li>
<ol>
<li>SUBPLOT 001</li>
<li>SUBPLOT 002</li>
<li>SUBPLOT 003</li>
</ol>
<li>OFFICIAL SERVER FACTIONS</li>
<li>MEMBER-CREATED FACTIONS</li>
</ol>
</div>
<div class="page_content">
<div class="page_text" id="top">
<h1>lore questions</h1>
<div class="page_em"><u>A NOTE</u> This world- the world of <u style="color: #4fecc8; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 7px; font-family: 'work sans', Arial, sans-serif;">STICTION</u>- isn't just the project and product of
the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in our Discord. Questions are either answered according to existing lore, or (in cases where the
staff team hasn't thought of a situation or scenario) are talked out with members to come to a satisfying answer. This page is updated regularly, so make sure you keep an eye on it!
<p>
It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions!</div>
<h2>quick links</h2>
<faqentry id="quick links">
<ol>
<li><u>world-building</u></li>
<li><u>subplots</u></li>
<ol>
<li><u>crossed wires subplot</u></li>
<li><u>live for the applause subplot</u></li>
<li><u>blood and chocolate subplot</u></li>
</ol>
<li><u>species-specific</u>
<ol>
<li><u>general abilities</u></li>
<li><u>witches</u></li>
<li><u>shifters</u></li>
<li><u>vampires</u></li>
<li><u>reapers</u></li>
<li><u>ghosts</u></li>
<li><u>phoenixes</u></li>
<li><u>familiars</u></li>
<li><u>androids</u></li>
</ol>
</ol>
</faqentry>
<a name="section"> </a>
<Br><br>
<h2>world-building</h2>
<h3>context clues</h3>
Before you get started exploring this new world, it’s helpful to keep in mind a few things for context! (It might even help you answer your own questions, who knows?) The first bit of info you’ll need is that electricity and all other forms of energy
are obsolete; instead, the world runs on magic energy. That leads into point two, which is that supernatural, magic creatures are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.<br><br> Since
this is a cyberpunk site, it stands to reason that technology is wildly more advanced than what we have now. It’s no so advanced that interstellar travel exists, but it’s so much farther ahead that paper (and privacy, in a lot of ways) is a thing
of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL) for short, and everything on the planet runs through it. As far as specific pieces of technology go, that’s largely up to you, your
ideas, and genre standards.<br>
<Br> It never hurts to ask an admin or run an idea by us before executing an idea, though!
<button class="accordion"><h3>What's the primary language spoken in City 0023? What about the rest of the world?</h3></button>
<div class="panel">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
<br>
<Br>
<u>Back to Top</u>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

To answer your original question, as you discovered, as long as that .panel div has top and bottom padding, it will have an intrinsic minimum height which is why it wasn't closing all the way.
The easiest way I can think of to achieve the desired result without changing too much of your existing code is to nest the text inside a div that is a child of .panel and move the padding property (and optionally the line-height property as well) to the nested element (which I called .panel__content -- you can call it whatever you want).
div.panel {
margin:10px 30px 20px 30px;
background:rgba(0,0,0,0.3);
display:block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding:40px;
line-height: 170%;
}
<div class="panel">
<div class="panel__content">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing; most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
</div>
Working JSFidddle example
Some side notes:
I would also highly recommend that you validate your HTML and CSS, as you have a number of validation errors currently. Best way to do that is to paste your code into W3C's online validators:
HTML Validator:
https://validator.w3.org/#validate_by_input
CSS Validator:
https://jigsaw.w3.org/css-validator/#validate_by_input
You might not need to add div to your .panel selector to achieve the same result. All things being equal, it's a best practice to have selectors be as short as possible.
You might not need to set .panel to display:block; as div's have this property value by default.

Try adding
box-sizing: border-box;
On your panel. This should make it so the padding is a part of height. You may have to adjust other values if that shifts things slightly.
Otherwise, you could set padding top and bottom to 0 when closed and transition those values as well, when collapsing.

max-height property overrides the height property but the padding top and bottom value will added to the height when css is getting compiled and value of height well be 80px
so set the padding to
div.panel { padding: 0 40px }
and change your script to
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.style.paddingTop = 0;
panel.style.paddingBottom = 0
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.paddingTop = null;
panel.style.paddingBottom = null
}
})
}

Cannot click on ::after on Firefox

I have a HTML and CSS code, and it works fine on Chrome. However, on Firefox, the behavior is different.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
left: 100%;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
border: ;
}
<button id="groupToggle">
<span>All selected</span>
</button>
After the All Selected, there is a button that is created through pseudo CSS (after). It can be clicked when hovering on Chrome but not on Firefox. Any thoughts?
Firefox version: 64.0
Link: https://codepen.io/anon/pen/zymvPj (Please use Firefox to test it).

There actually is no way to make it behave the same way as it does in Chrome. :after and :before are not treated as DOM elements by Firefox. You can however, cheat it a little bit. Changing behave for all browsers. That is my proposition of solution to look the same and behave as you would like it to do.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 224px;
/* increased by 24px (after width) */
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
z-index: 0;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
position: absolute;
text-align: center;
top: -1px;
width: 2em;
position: absolute;
cursor: pointer;
border: ;
right: -1px;
/* -1px to neutralize border */
}
/* ONLY TO SHOW IT WORKING */
button#groupToggle:focus {
outline: red solid 10px;
-moz-outline: red solid 10px
}
<button id="groupToggle">
<span>All selected</span>
</button>

Font-Awesome 5 - Pseudo-elements
Requirements for Free Solid Version
Have this in the <head> tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
In your stylesheet:
.icon::after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.arrow::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
The content property needs Unicode not >
Those two classes names are arbitrary but be sure that they are on the same tag:
<button class='icon arrow'></button>
Absolute Positioning
Font-Awesome (or lack thereof) wasn't the problem, but I had to address the elephant in the room. Anyhow, left:100% pushed the part out of the button's border and looks as if Firefox treats the pseudo-element like it doesn't belong to the button, while apparently Chrome remembers. The solution is simply: remove left:100% and add right:0
Demo
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
.icon::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
font-size: 12px;
line-height: 2.7;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
height: calc(100% + 1px);
right: 0;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
}
button#groupToggle::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<button id="groupToggle" class='icon'>
<span>All selected</span>
</button>

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Break word when no space

I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.

Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN

try this, use clearfix class
<p class="clearfix"></p>

Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}

Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}

You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}

Cannot hack pass css plugin to make two input elements appears in-line?

I'm using a plugin for drop down menu. The link for plugin is here.. I want to add this code, into already made html code, but first I wanted to tested. So, far it all works fine until I try to make two copies of widget and make them appear side by side. The default is for input element to appear in-line but the plugin css is pushing it down turning into a single column (stacked) I don't want this. Here is HTML code.
HTML
<head>
<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.mcdropdown.js"></script>
<!---// load the mcDropdown CSS stylesheet //--->
<link type="text/css" href="css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<ul id="categorymenu" class="mcdropdown_menu">
<li rel="1">
Arts & Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
<li rel="7">
Business & Economy
</li>
<li rel="8">
Computers & Internet
</li>
<li rel="9">
Education
</li>
<li rel="11">
Entertainment
<ul>
<li rel="12">
Movies
</li>
<li rel="13">
TV Shows
</li>
<li rel="14">
Music
</li>
<li rel="15">
Humor
</li>
</ul>
</li>
<li rel="10">
Health
</li>
</ul>
<div class="test"> <input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category" id="category_1" value="" /></div>
JAVASCRIPT
<script>
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu");
$("#category_1").mcDropdown("#categorymenu");
});
</script>
</body>
</html>
CSS PLUGIN
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
Things I have tried that Failed
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
<style>
#category, #category_1{
display: inline;
}
</style>
Please guide me. Thanks.

Add this to your css:
div.test > div {
float: left;
width: 408px;
margin-right: 20px;
}

According to the plugin page:
NOTE: The initial element that you apply the plug-in to is destroyed
and replaced with a new input element with the same id attribute.
While the mcDropdown() method does not destroy the jQuery chain, it
does effectively return a "dirty" reference (since the original
element no longer exists.) Because of this, you'll want to make sure
that the mcDropdown() method is the last call in your chain. Also, if
you plan on caching a reference to the element, you will need to
create the cached instance after you initiated the widget.
Honestly I'm not even sure if that's related.
But your code (albeit not functioning as advertised) is lining up the way you want when I look at it.
Here's a fiddle for you to see what I see.
Keep in mind of course that I'm not sure why it's not functioning properly. I put it on my desktop and replicated the whole example as-is and still nothing. But the input boxes are nice and neat :)
I did notice you left off the jquery.bgiframe.js file but I don't think that's necessary.