Develop Reference

html/css gallery div - how to display text in on line

Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
Unfortunately I don't know why but I can't insert all the code.
Here is Currently result:
except result:
Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
here is my code:
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
padding: 2px;
text-align: right;
color: black;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
margin-top:5px;
overflow: hidden;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
</style>
<! Produkt 1 -->
<div class="gallery">
<div class="desc1">#BOX1</div>
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" alt="Cinque Terre" width="800" height="600">
<div class="desc"><div id="clock1">timmer</div><div class="desc3">KARL LAGERFELD</div><div class="desc4">Zestaw 3x Polo</div><div id="pricebox"><s>309,00zł</s> <font color="red">198,00zł</font></div><button class="button button4">Szybki zakup</button></div>
</div>

Adding width:50%; float:left; to each of the first two div elements is one way to solve it. And adding a common class to the second row with width:33%; float:left; puts the second row items together (after moving the button up into the same div as the prior two items).
Also, the font tag and the s element are deprecated. Styling should be done with CSS.
.red { color:red; }
.right { text-align:right; }
.third { display:inline-block; width: 33%; float:left; font-size:1.5em;}
.strike { text-decoration:line-through; }
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
text-align: right;
color: black;
width:50%;
float:right;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
overflow: hidden;
width:50%;
float:left;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
<div class="gallery">
<div class="desc1">#BOX1</div>
<a href="img_5terre.jpg" target="_blank" rel="noopener">
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png"
alt="Cinque Terre" width="800" height="600">
</a>
<div class="desc">
<div id="clock1">timer</div>
<div class="desc3">KARL LAGERFELD</div>
<div class="desc4">Zestaw 3x Polo</div>
<div id="pricebox">
<span class="third strike">309,00zł</span>
<span class="red third">198,00zł</span>
<span class="third right"><button class="button button4">Szybki zakup</button></span>
</div>
</div>
</div>

This seems not to be a valid function. Why?

Both Brackets and Firefox call this a non-valid function. I'm a beginner. Can somebody tell my why? It's just about the js.
I want that if you hover over "timer" and click "jaar", the button that says "timer" now says "1 jaar".
function maand() {
HTMLDocument.getElementById("timer").innerHTML = "Hello JavaScript!";
}
html {
padding: 0;
margin: 0;
font-family: 'tahoma';
font-size: 14px;
}
body {
padding: 0;
margin: 0;
background-color: #f3f3ed;
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float:left;
border-radius:2px;
position:absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px
text-align: center;
}
.green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float:right;
position:relative;
margin-right: -54px;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position:absolute;
width:100px;
height:100px;
float:left
}
#timer {
color:black;
background:#eee;
border:none;
padding-left: 10px;
font-size:12px;
border-radius: 2px;
float:left;
padding: 12px 12px;
cursor:pointer;
list-style-type: none;
position:Relative;
margin-left:414px;
margin-top: -14px;
width:60px
}
#timer:hover {
color:white;
background:#027fed;
}
li {
background-color:#eee;
font-size:inherit;
width:150px;
position:relative;
float:left;
bottom:31px;
left:0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom:1px;
margin-left:431px;
}
li:hover{
cursor:pointer;
background-color:#027fed;
color:white
}
.list {
display:none;
list-style-type: none;
position:absolute !important;
}
.keuze:hover .list {
display:block
}
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list"><li>jaar</li>
<li id="jaar" id="maand" onclick="maand()">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
<li id="uur">uur</li></div>
</ul>
</div>

Use document instead of HTMLDocument.
document.getElementById("timer").innerHTML = "Hello JavaScript!";
Better yet, if you're only inserting text, use textContent, it's more reliable and more appropriate:
document.getElementById("timer").textContent = "Hello JavaScript!";

I solved the problem by using a script tag I found at W3schools.com:
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dom
thanks to all of the people who tried solving it.

dynamic divs not displaying in express js

Goodday all,
Please i am still getting a hang of node and express js.
I created dynamic div in html using javascript (in my public folder) and it works fine. i try to change the location of the javascript to make it more accessible by placing it in a route folder when i want to retrieve data from mongodb.
I render it and the dynamic divs don't show anymore.
I am guessing it has to do with the placement but i don't know where to start.
please can somebody help me with this logic
where the issue is, is with the javascript function multidivs(); which works fine outside express.
Thank you
i placed multidivs() this way below
<form action="/routes/top100" method="POST" >
<div id="bodydiv">
<div id="leftdiv" >
<script type="text/javascript"> ***multidivs();*** </script>
</div>
</div>
</form>
for some reason it works well with netbeans IDE
below are the codes
HTML
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="/routes/top100.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<div id="wrapper">
<div id="container">
<nav>
<div class="logodiv">logo </div>
charts
news
music
<a href=""><img height="20" src='/images/fblogo.png' alt="" class=''
width="20"/></a>
<a href=""><img height="20" src='/images/Instagram.png'
alt="" class='' width="20"/></a>
<a href=""><img height="20" src='/images/twitter.png'
alt="" class='' width="20"/></a>
<a href=""><img src='/images/search.png' alt=""
class='searchicon'/></a><!--
-->
<div class="menudiv"> <a href=""> <img
src='/images/menu.png' alt="" class='icons'/> </a>
</div>
</nav>
<form action="/routes/top100" method="POST" >
<div id="bodydiv"> <div id="leftdiv" > <script
type="text/javascript" >multidivs();</script></div>
<!--<script type="text/javascript" > multidivs();
</script>-->
<div id="rightdiv">
<div class="topdiv"><div class="innertop"> Top100
news</div> </div>
<div class="bottomdiv"><div class="innerbottom">
Highlights</div> </div>
</div></div>
</form>
</div>
</div>
</body>
</html>
the css
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*wrapper for navigation divs and <a>*/
.wrapper1
{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align: left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight: lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align: left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left;
white-space: nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv
{
float:right;
padding-right: 50px;
margin-left: 30px;
}
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items: center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
background-color: black;
text-align: right;
vertical-align: middle;
color:white;
z-index: 99;
}
nav a
{
color: white;
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
vertical-align: middle;
}
/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:60vh;
height:75vh;
float:left;
}
#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
}
.topdiv
{
width:35vh;
height:35vh;
text-align: center;
vertical-align: middle;
background-color: gray;
float: right;
min-width: 25%;
}
.bottomdiv
{
line-height: 100px;
text-align: center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color: black;
float: right;
min-width: 25%;
}
/*div to multiply*/
.innerdiv
{
align-content: center;
align-self: center;
width:80vh;
height:20vh;
background-color: gray;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:20vh;
height:15vh;
margin-top:2vh;
display:inline-block;
float:left;
margin-left:1vh;
}
.arrowdiv
{
width:8vh;
height:19.8vh;
margin:0vh;
line-height: 2vh;
background-color:#131212;
display:inline-block;
float:left;
}
.ccontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
display:inline-block;
float:left;
}
.rcontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: beige;
text-align: center;
float:right;
display:inline-block;
float:left;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color: beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;
}
.imgdiv
{
margin-top: 50px;
margin-left: 10px;
width:20px;
height:20px;
}
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
#popup
{
}
.popup
{
width:135px;
height:40px;
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
.col1
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-right:1px solid white;
}
.col2
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-left: 1px solid white;
}
.img
{
max-width:180px;
}
the javascript code
/*define function for multidivs*/
var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
//attach arrow image
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);
domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);
columndiv.appendChild(popup);
}); }
function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
}); }
}

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.

Minimize on click in javascript

I have a notification block at the lower right end of my webpage which is fixed. I have designed it using HTML and CSS. Here is the link.. http://jsfiddle.net/wp5Lfjwq/
Now if the user click's on 'X', I want the notification to get resized (say for example, height: 50px and width: 50px) and only show the 'Some Title' and do not want the whole notification box to disappear.
By using toggle in java-script I can make it disappear but how do I resize it?
Here is the HTML:
<div class="notification">
<span class="notificationtitle">
<strong>Some Title</strong>
<span style="float: right">X</span>
</span>
</div>
Here is the CSS:
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
Any help would be appreciated...

Your Answer is ...
$(document).ready(function() {
$(".show span").click(function() {
$(".show").css( 'display' , 'none' );
$(".hide").css( 'display' , 'block' );
});
$(".hide strong").click(function() {
$(".hide").css( 'display' , 'none' );
$(".show").css( 'display' , 'block' );
});
});
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
}
.show{
display:block;
}
.hide{
display:none;
width:150px;
height:30px;
cursor:pointer;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font: "HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.notificationtitle span{
float:right;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification show">
<span class="notificationtitle"><strong>Some Title</strong><span>X</span></span>
</div>
<div class="notification hide">
<span class="notificationtitle"><strong>Some Title</strong></span>
</div>

Use animate()
$('.notificationtitle').on('click',function(){
$('.notification').animate({width:'50px',height:'46px'});
})
Updated Demo

Try this :
$('.notificationtitle span').click(function(){
$(this).closest('.notification').css({width:'50px',height:'50px'});
});
DEMO

demo - http://jsfiddle.net/wp5Lfjwq/11/
toggle a class with width and height
$('.notificationtitle').on('click', function () {
$('.notification').toggleClass('hide');
})
.notification {
border-image: none;
border-style: solid solid none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-width: 2px 2px medium;
padding: 10px;
position: fixed;
background-color: #ffffff;
border-color: #666;
right: 10px;
bottom: 0;
z-index: 1;
margin: 0 auto;
width: 300px;
float: left;
height: 190px;
text-align: center;
transition: all .5s linear;
}
.notificationtitle {
display: block;
font-size: 22px;
font-weight: normal;
line-height: 26px;
font:"HelveticaNeueLTStd65Medium";
color: #4d4d4d;
}
.hide {
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="notification"> <span class="notificationtitle"><strong>Some Title</strong><span style="float: right">X</span></span>
</div>