I am having some trouble with aligning four div boxes next to each other, Or more correctly, I have aligned my two “head” boxes next to each other but my problem is that I am using them as a expand-collapse container and those boxes will make a damage in other expandable box on line 2! so when you expand the box “head 1” the box “head 4” will float to right!
I want box “head 4” and box “head 3” to go down instead of floating right and left when you expand box 1 or 2
Guys asked me too run this to be easier for them to see whats going
on, I am totally sorry ill be aware next time to reduce the code, Here
is the boxs running
DemoYou can check the boxes by simply trying to expand each and the
problem will be so clear
and Here is my code i am having problem with as reference:
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = `document.getElementById(tbid).style.display == "table" ? "none" : "table";}`
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong> </font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong> </font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</body>
</html>
You should take a look at that jQuery accordeon. It would be a lot simpler for you. And would make your html a lot cleaner. Also take a look at jQuery library, it would simplify your life using JavaScript a lot.
Also, you should put the style in css stylesheet so your css would be a lot more “DRY”.
Else you can do a fix by following these steps:
float:left.float : leftand then adapt the margins.<div style="clear : both;" />between the first and second table of each div.Here is the fiddle showing the behavior
And the source code :