We Keep Coding

Divs side by side and under each other

First post here. I will provide pictures of the problem.
Hello!
I am currently working with a project where i have 2 divs that should always be on the top of the page. Side by side. That's no problem. The problem appears when i add new divs which should be side by side, but under the first 2 ones.
The size of the first 2 divs differ, and if the second of the 2 top ones is "shorter" than the first one, the ones that i add under these two ends up at wierd positions.
Every block is in ones own div and every div is in a big div. Hope you guys can help.
Here is the classes:
.panelLeft {
width: 40%;
float: left;
}
.panel {
background: #eee;
padding: 20px;
margin: 10px;
border-radius: 7px;
-webkit-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
-moz-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
}
.displayNone {
display: none;
}
Here is some example code:
<div>
<div>
<table>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton1" Text="Toggle div1" OnClientClick="toggleDiv('divNr1'); return false;" />:</td>
</tr>
<tr>
<td><asp:Linkbutton runat="server" ID="linkbutton2" Text="Toggle div2" OnClientClick="toggleDiv('divNr2'); return false;" />:</td>
</tr>
</table>
</div>
<div id="divNr1" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral1" Text="Some text"/></td>
</tr>
</table>
</div>
<div id="divNr2" class="panelLeft panel displayNone" runat="server">
<table>
<tr>
<td><asp:Literal runat="server" ID="someLiteral2" Text="Some text"/></td>
</tr>
</table>
</div>
</div>
And here is the toggle funtcion:
function toggleDiv(divName) {
if (divName === 'divNr1') {
divNr1.toggle("fast");
}
else if (divName === 'divNr2') {
divNr2.toggle("fast");
}
}
Ill show you what i mean with a picture:
And how i want it is like this:
Thanks you so much!

Enclose each row of divs in another div. Like this:
<div>
<div>left</div>
<div>right</div>
</div>
<div>
<div>left</div>
<div>right</div>
</div>
etc...

Use inline-block for your divs, like this;
<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
<div id="div3"> Div 3</div>
<div id="div4"> Div 4</div>
<div id="div5"> Div 5</div>
and this CSS
body {
font-size: 0;
}
div {
width:45%;
margin: 1px 2.5%;
height: 100px;
background: #ccc;
display: inline-block;
vertical-align: top;
font-size: 20px;
text-align: center;
padding-top: 20px;
}
#div1 {height: 150px;}
font-size: 0 is to make your dimensions work correctly but don't forget to put the font-sizes back in again.
https://codepen.io/chrispink/pen/EvxEoe

Disabling the scroll ability in JSFiddle

Is there a way to fully disable scrolling in JSFiddle.
I've tried:
position: fixed;
and
overflow: hidden;
however I can still scrolldown when I embed the results in my site. I wondered if anyone had any tips on how to fully fix something and have no scrolling abilities.
My current HTML and CSS:
.hidden {
visibility: collapse;
}
html,
body {
height: fit;
background: #e2dede;
margin: 10px;
}
div {
width: fit;
overflow: hidden;
}
td + td {
border-left: 1px solid #eee;
}
th {
border-bottom: 1px solid #fff;
background: #333333;
color: #fff;
padding: 5px 5px;
font-family: "raleway";
font-size: 14px;
}
td {
border-bottom: 1px solid #eee;
background: #e2dede;
color: #000;
padding: 5px 5px;
font-family: "raleway";
font-size: 13px
}
<table class="tablesorter">
<table>
<thead>
<th>Name</th>
<th>Release Date</th>
</thead>
<tbody>
<tr>
<td>Peter Parker</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>John Hood</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>Clark Kent</td>
<td>12/07/2015</td>
</tr>
<tr>
<td>Bruce Almighty</td>
<td>13/07/2015</td>
</tr>
<tr>
<td>Bruce Evans</td>
<td>14/07/2015</td>
</tr>
</tbody>
</table>

When you embed a JSFiddle demo on your site, JSFiddle adds a "Result" bar across the top to add a link to allow editing the demo in JSFiddle. Because of that bar and a nested iframe set to the same height as the outer frame, a scroll bar shows up (demo).
<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0">
<div id="wrapper">
<div id="head">
<h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1>
<div id="actions" class="">
...
</div>
</div>
<div id="tabs" style="height: 298px;">
<div class="tCont result active" id="result">
<iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
</div>
...
</div>
</div>
</iframe>
Look at the height settings added by JSFiddle in the above HTML.
So essentially, you can't prevent the embedded JSFiddle iframe from scrolling since it's the iframe within the embedded iframe that has a set height.
If you don't like the scroll:
Submit an issue to jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
Don't use an embedded jsFiddle on your site.
Make a Stylish style that sets the iframe embedded within the iframe height to auto - this would only work on your browser, but would apply to the sites you specify.

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});

Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2

I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

Overlapping Two DIVS Horizontally

Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.
The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)
Link to Fiddle
Link to Updated Fiddle
<tr style="border:1px; height:30px;">
<td style="border:1px solid black; position:static">
<div style="margin-left:0;width:50px;display:inline;position:relative">
<div style="background-color: green; position:absolute">
Div1
</div>
</div>
<div style="margin-left:0px;width:20px;display: inline; position:relative">
<div style="background-color: red; position:absolute">
Div2
</div>
</div>
</td>
<td>
</td>
</tr>
I need both DIVs to be start relavtive from the edge of the cell.
Thanks

As far as I can tell you just need to push the red <div> down a bit. And since you've positioned it absolutely, it's easily done with top:
<div style="background-color: red; position:absolute; top:10px;">
Check this update on your jsFiddle

They're going to be stacked like this, you should also be able to float the divs and set z-index explicitly to stack them.
http://jsfiddle.net/ianfc89/JDff9/13/
HTML
<body onload="REDIPS.drag.init()">
<script>
REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
<table class="tableWhole">
<tbody>
<tr>
<td class="tableCell">
<div style="position:relative">
<div id="A125_Contain" class="drag progressContainer" >
<div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
</div>
<div id="B125_Contain" class="drag progressContainer" >
<div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px; ">A125</div>
</div>
<div>
</td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
</tr>
<tbody>
</table>
</div>
Styles
.containDiv {
}
.tableWhole {
width:1000px;
table-layout:fixed;
}
.tableCell {
width:300px;
height:60px;
border:1px solid black;
}
.progressContainer
{
display:inline; border-bottom-style: none; position: relative; top: 0px; left: 0px; width: 100px; height: 20px;
}

Untoggle Previous Menus on click of the Next Menu Header

I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.
What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?
here is my code..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
HTML
now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center> NOKIA 8320 </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;

// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown
Example JSFIDDLE
edited as the above code means you can't toggle the current togglebox
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
Because of later addition of more code to question;
Updated JSFiddle

I prepared a DEMO H E R E
Let me know if this suits your needs.