Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to achieve this type of table so that I can have extended labels for columns. But I don't even know what it's called to try and describe it in a search.
Edit
I can find how to round html borders with CSS. But that doesn't help with linking rows to columns. I can rotate the column header text, but again, that isn't what I'm after.
The closest thing I can come up with is a full table with borders or a background colour to highlight the connection, but this would be squared instead of rounded.
I'm wondering if there is a method of achieving this with css. Or alternatively a library which would do the same thing.
I have never heard about something like this. In general, you cannot curve any element like that, supposing that link is normal part of table (tr/td).
I have created some small thing here, making the curvers, than you can add it over your table to make that feeling, but note, that you cannot write inside it, and most umportantly, it will not work, as this will not look precise across browsers and zoom (tested on another projects, where I needed also some circled things)
So you should better design your table in other way.
Anyway, here is a snippet with rounded linked things
.circ, .circ2, .circ3 {
position:absolute;
border-radius: 50%;
display: inline-block;
background-color: transparent;
border-top: 1px solid black;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
transform: rotate(45deg);
}
.circ{width: 180px;
height: 180px; top:0; left:0;}
.circ2{width: 135px;
height: 135px; top:23px; left:22px}
.circ3{width: 80px;
height: 80px; top:50px; left:50px;}
.container{position:absolute; top:20px; left:20px; border:1px dotted black;width:200px; height:200px;}
<div class="container">
<div class="circ"></div>
<div class="circ2"></div>
<div class="circ3"></div>
</div>
Als read this - this is full list of transforms, that browsers supports:
https://www.w3schools.com/cssref/css3_pr_transform.asp
This is a close mockup to what you were looking for
https://codepen.io/anon/pen/dZrXPd
I wrote part of it in SCSS because it's easier for me, and the snippet here is a compiled version of it...
ul {
list-style: none;
padding: 0;
width: 400px;
float: left;
}
ul li:nth-child(1) {
background-color: blue;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: red;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.round-edges {
float: left;
width: 80px;
background-color: grey;
height: 70px;
margin-top: 15px;
border-radius: 0 50px 0 0;
position: relative;
}
.round-edges .round1 {
background-color: blue;
height: 70px;
width: 75px;
border-radius: 0 50px 0 0;
}
.round-edges .round2 {
background-color: green;
height: 50px;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 25px 0 0;
}
.round-edges .round3 {
background-color: red;
height: 33px;
width: 25px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0 20px 0 0;
}
tr td:nth-child(1) {
width: 400px;
}
tr td:nth-child(2) {
background-color: red;
width: 20px;
text-align: center;
}
tr td:nth-child(3) {
background-color: green;
width: 20px;
text-align: center;
}
tr td:nth-child(4) {
background-color: blue;
width: 20px;
text-align: center;
}
<div class="clearfix">
<ul>
<li>
Last Col
</li>
<li>
Middle Col
</li>
<li>
First col
</li>
</ul>
<div class="round-edges">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
</div>
</div>
<table>
<tr>
<td>
Something
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Some other thing
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Something Completely Different
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
X
</td>
<td>
X
</td>
<td>
X
</td>
</tr>
</table>
??? Use id or number + legend
#1 #2 #3
left mid right
L M R
Or, may be better, if you create image.
But, you can still use border-radius + position in table row. May be its not work cross-browser, as you wish.
http://border-radius.com
(write 40 to black input box on site, for example)
Related
I created a 3x3 table for my tic-tac-toe game using the table tag and i added a click event listener to the each of the row using forEach loop but unfortunately nothing is showing in my console
const boxes = document.querySelectorAll('.box');
const strategy = document.querySelector('#strategy');
const restartBtn = document.querySelector('#restart');
const arry = [];
const tick_x = 'X';
const tick_o = 'O';
const userAction = () => {
boxes.forEach((box) => {
box.addEventListener('click', function clk() {
console.log("clicked")
})
})
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: teal;
overflow: hidden;
font-family: "Itim", cursive;
}
.game {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p {
color: white;
text-align: center;
margin: 40px auto;
width: 200px;
}
table {
margin-bottom: 50px;
border-radius: 10px;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
button {
width: 100px;
}
h1 {
width: 100%;
height: 100%;
text-align: center;
}
.row1 td {
width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}
.row2 td {
width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}
.row3 td {
width: 100px;
height: 100px;
border-left: 1px solid white;
}
.r11 {
border-left: none;
}
<div class="intro">
<p class="name">TIC-TAC-TOE</p>
<h2 id="strategy"></h2>
<p class="player">Player X'S turn</p>
</div>
<table>
<tr class="row1">
<td class="r11">
<h1 class="box" id="0"> </h1>
</td>
<td class="r12">
<h1 class="box" id="1"> </h1>
</td>
<td class="r13">
<h1 class="box" id="2"> </h1>
</td>
</tr>
<tr class="row2">
<td class="r21">
<h1 class="box" id="3"> </h1>
</td>
<td class="r22">
<h1 class="box" id="4"> </h1>
</td>
<td class="r23">
<h1 class="box" id="5"> </h1>
</td>
</tr>
<tr class="row3">
<td class="r31">
<h1 class="box" id="6"> </h1>
</td>
<td class="r32">
<h1 class="box" id="7"> </h1>
</td>
<td class="r33">
<h1 class="box" id="8"> </h1>
</td>
</tr>
</table>
<button id="restart"><h3>Reset</h3></button>
</div>
I recommend that you use a single event handler for the whole table rather than creating one for each row. (This used to be known as a "delegated event handler.")
That would look like this:
let table = document.querySelector('table')
function onClickCell( event, cellId ) {
// this is invoked when a cell is clicked
console.log(`onClickCell`, cellId)
}
// this is the delegated event handler
table.addEventListener('click', event => {
// figure out which table cell it occurs within
let td = event.target.closest('.box')
// if click wasn't inside a cell (e.g. was in gutter), don't fire the cell-click handler
if(!td) return true
// click WAS inside a cell: fire cell-click handler with some helpful data
let cellId = td.getAttribute('id')
return onClickCell(event, cellId)
})
Some reasons for using a delegated event handler:
Better runtime performance
Admittedly, this is less of an issue with modern browsers than it was 10 years ago, and isn't a major problem given that your use-case is so small, but it's still a good practice.
One handler is easier to manage than three
You will want clicks on the table to do different things depending on the current game phase. During the "gameplay" phase, clicking on a cell should claim the cell for the active player. Before gameplay begins, maybe there is no visible grid of cells, or maybe you have an invented mechanic for choosing which player goes first. After the gameplay phase, you may want clicking on a cell to reveal on which turn that cell was claimed (so players can study the game they just finished). No matter what you've got in mind, having a single root-level click handler for the table will drastically simplify the job of re-wiring how clicks are handled.
Survivability
If you modify the document, either by overwriting some innerHTML, or by using the DOM API to modify nodes, you'll obliterate existing click handlers that are attached to the modified portion of the document. But a delegated handler is, by definition, attached to a distant ancestor of the relevant part of the DOM, meaning it will survive and stay active.
Define your own API
You have zero control over the arguments that the browser provides to a regular DOM event handler. But a delegated handler can pass any data you want to your specialty function, meaning you can define a custom API for the functions it calls. In my example, I make the delegated handler do the work of grabbing the cell's ID, and then it passes that value as an argument to the cell-click handler; that's work the cell-click handler no longer needs to do. The delegated handler could also collect other info about the current game state and provide that to the cell-click handler. A delegated handler can also selectively ignore some some clicks, or call additional functions, or even call the cell-click function multiple times -- essentially letting you invent new kinds of events. A more sophisticated version might even fire literal CustomEvents that are listened for at the document level.
You never call userAction, so you can either call it or wrap it in a closure and call it (as below)
const boxes = document.querySelectorAll('.box');
const strategy = document.querySelector('#strategy');
const restartBtn = document.querySelector('#restart');
const arry = [];
const tick_x = 'X';
const tick_o = 'O';
(() => {
boxes.forEach((box) => {
box.addEventListener('click', function clk () {
console.log("clicked")
})
})
})()
html{
height: 100%;
} body{
margin: 0;
padding: 0;
background-color: teal;
overflow: hidden;
font-family: "Itim", cursive;
}
.game{ display: flex; flex-direction: column; justify-content: center; align-items: center; } p{ color: white; text-align: center; margin: 40px auto; width: 200px; }
table{
margin-bottom: 50px;
border-radius: 10px;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
button{
width: 100px;
} h1{ width: 100%; height: 100%; text-align: center;
}
.row1 td{
width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}
.row2 td{
width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}
.row3 td{
width: 100px;
height: 100px;
border-left: 1px solid white;
}
.r11 {
border-left: none;
}
<!DOCTYPE html>
<head></head>
<body>
<div class="intro">
<p class="name">TIC-TAC-TOE</p>
<h2 id="strategy"></h2>
<p class="player">Player X'S turn</p>
</div>
<table>
<tr class="row1">
<td class="r11"><h1 class = "box" id ="0"> </h1></td>
<td class="r12"><h1 class = "box" id ="1"> </h1></td>
<td class="r13"><h1 class = "box" id ="2"> </h1></td>
</tr>
<tr class="row2">
<td class="r21"><h1 class="box" id ="3"> </h1></td>
<td class="r22"><h1 class="box" id ="4"> </h1></td>
<td class="r23"><h1 class="box" id ="5"> </h1></td>
</tr>
<tr class="row3">
<td class="r31"><h1 class="box" id ="6"> </h1></td>
<td class="r32"><h1 class="box" id ="7"> </h1></td>
<td class="r33"><h1 class="box" id ="8"> </h1></td>
</tr>
</table>
<button id="restart"><h3>Reset</h3></button>
</div>
</body>
You create the userAction function, but never call it.
Add at the end:
userAction()
I want to show a popup using qTip1 with 2 divs, the first one contains a picture and has to be on the left, the second one has some text in a table and has to be on the right. The problem is when I create the inner HTML for qTip, the table with the text is always under the picture and not on the right. I've tried some solutions here on stackoverflow but I think I'm missing something.
This is what the generated inner HTML for qTip looks like:
<div id="infoBoxParent" style="margin: 20px 20px 0 0; border: 1px solid #333; overflow: auto">
<div id="infoBoxPicture" style="float: left; border: 1px solid green;"><img
src="foo.png"
alt="" width="111" height="170" class="photo left" style="float: left;"/></div>
<div id="infoBoxFacts" style="float: right; border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional
and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A
sites. With your help, we're working together to build a library of detailed answers to every
question about programming.
</td>
</tr>
</table>
</div>
</div>
What am I doing wrong?
If I am understanding your question this should work. It is from a css framework I built(Responder). I removed a lot of code so it highlights the solution to your question. The .reponsive-image class is not necessary but I added it because you are using images in your project.
If you want to change the width of your columns you can add classes to your style sheet in the folowing fashion:
.column25{
max-width:25%;
width:25%:
}
There is a link below for Responder that has a lot of these classes typed out already if you need to copy them.
Link to Solution Preview: http://codepen.io/larryjoelane/pen/OMEoMq
Link to Responder CSS framework: http://codepen.io/larryjoelane/pen/XmzQba
CSS:
/*makes an image responsive*/
.responsive-image {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
/* responsive container for the column classes*/
.row {
/*set the max width of the .row class to
*to 100% so the columns within it do not exceed
*a sum of 100% combined
*/
max-width: 100%;
/*keeps the .row divs next each other when the screen
resizes*/
overflow: hidden;
}
.row div {
/* adjust the aspect of the font
* so it displays well and within the div elements
* when the screen is resized
*
*/
font-size-adjust: 0.45;
line-height: 1.5;
/*provide some spacing in between the lines*/
float: left;
/*removes spacing between in line elements*/
clear: none;
/*removes spacing between in line elements*/
display: inline-block;
/*make the div elements align horizonatally*/
/*styling below prevents padding and borders from breaking
the max-width setting of the columns*/
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
/*allow long words to wrap to another line*/
word-wrap: break-word;
}
/*begin section for styling the column widths*/
.column50 {
max-width: 50%;
width: 50%;
}
HTML:
<div class="row" id="infoBoxParent" style="border: 1px solid #333; overflow: auto">
<div class="column50" id="infoBoxPicture" style="border: 1px solid green;"><img src="foo.png" alt="foo image" width="111" height="170" class="photo left" style="" /></div>
<div class="column50" id="infoBoxFacts" style="border: 1px solid red; overflow: hidden">
<table>
<tr>
<td style='padding:5px;text-align:left;'>Some Text:</td>
<td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of detailed answers
to every question about programming.
</td>
</tr>
</table>
</div>
</div>
You could try to remove all the inline css and put the following code in the header.
This should work.
<style>
#infoBoxParent {
margin: 20px 20px 0 0;
border: 1px solid #333;
overflow: auto;
width: 100%;
}
#infoBoxParent div {
position: relative;
float: left;
border: 1px solid;
}
#infoBoxPicture{
border-color: green;
width: 30%;
}
#infoBoxFacts{
border-color: red;
width: 68%; /* 2% margin for the lines */
}
</style>
ok so here goes. Im working on expanding my html, css, and javascript knowledge. To do this i began writing a few basic website designs (on a live server, but all made up and fake). On my most recent one, I've decided to go for dropdown menu's. To space this all properly i decided to go with a table element, and use some very basic (which is all i know right now) javascript. I am currently using a .dropdown and a .dropdown:hover to make my menus work. However since i used the table element, each time i "dropdown" my menu on my test page, the other menus titles resize to the size of the dropdown window. Any ideas how to combat this? heres my code....
CSS
.dropdown ul {
display: none
}
.dropdown:hover ul {
display: block;
background-color: white;
}
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
HTML
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<td class="dropdown">
<h1>
Search By Department
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</td>
<td class="dropdown">
<h1>
Search by Company
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</td>
You seem to have guessed it already: don't use table, besides being semantically incorrect (<table> is meant for tables with data) it gives you all kinds of other issues because of their default styling.
Use a straightforward (embedded) ul and position the sub menus absolute, make sure to make the top level menu items (li) position: relative; and display: inline-block; and it should be pretty straightforward from there.
One way to accomplish this is in you td {} style give a specific height such as 'height: 50px' and the float them 'float: left'. might not be the best option but it seems to accomplish it.
If you wish to use plain javascript. That should work fine.
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: -moz-linear-gradient(AliceBlue, White);
background: -webkit-linear-gradient(AliceBlue, White);
background: linear-gradient(AliceBlue, White);
}
table {
align: center;
font-family: cursive;
font-decoration: underline;
}
td {
border: solid 1px Lavender;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
cell-spacing: 6px;
}
h1 {
font-size: 14px;
}
.dd1,.dd2{display:none;}
</style>
<title>Discount Electronics</title>
</head>
<body>
<div style="text-align: center">
<img src="http://satasurfer.byethost33.com/2/logo.jpg" height="150px" width="70%" align="center">
</div>
<table>
<tr>
<td onmouseover="fun('dd1')"> Search By Department</td>
<td onmouseover="fun('dd2')"> Search by Company</td>
</tr>
<tr><td>
<div class='dd1 dropdown'>
<h1>
<ul>
<li>Computers and Laptops
<li>Computer Components
<li>Office Supplies
<li>Phones and PDAs
<li>Speakers and Audio
<li>Tablets and Ipads
</h1>
</div>
</td>
<td>
<div class='dd2 dropdown'>
<h1>
<ul>
<li>ACER</li>
<li>AMD</li>
<li>APPLE</li>
<li>BELKIN</li>
<li>BOSE</li>
<li>COBY</li>
<li>DELL</li>
<li>HP</li>
<li>HTC</li>
<li>JVC</li>
<li>LG</li>
<li>PANASONIC</li>
<li>SAMSUNG</li>
<li>SONY</li>
</h1>
</div>
</td></tr>
</table>
<script type='text/javascript'>
function fun(cls){
var arr=document.getElementsByClassName('dropdown');
for(i=0;i<arr.length;i++)
{
arr[i].style.display='none';
}
document.getElementsByClassName(cls)[0].style.display='block'
}
</script>
</body>
</html>
I have this CSS table code:
.navgroups table#rightTable {
float: right;
width: 33%;
}
.navgroups table#leftTable {
float: left;
width: 33%;
}
.nvagroups td#centerTable {
margin: auto;
}
In the middle table I want to insert an image, but the problem is bigger then just 33% (image size).
Every single letter in the middle table lowers the left table from the bar.
I tried the display:inline and display:inline-block.
I will just put this as an answer and I don't think anyone can get much better then this with the information you provided.
HTML:
<table class="rightTable">
<tr>
<td></td>
</tr>
</table>
<table class="leftTable">
<tr>
<td></td>
</tr>
</table>
<table class="centerTable">
<tr>
<td>
<img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
</td>
</tr>
</table>
CSS:
.rightTable {
float: right;
width: 33%;
}
.leftTable {
float: left;
width: 33%;
}
.centerTable {
margin: auto;
width: 33%;
}
table {
outline: 1px solid;
}
img {
width: 100%;
}
This is 3 tables all 33.33% with an image that fits in the center one.
DEMO HERE
And in this demo below we have text in the other tables. Works fine.
DEMO HERE
Update:
Demo of using 1 table instead of 3.
DEMO HERE
Here is my idea. Something like this:
<style>
table {
width: 100%;
border: 1px #cccccc solid; /* for cells preview */
}
td.left, td.right {
width: 33.33%;
background-color: #f0f0f0; /* for cells preview */
}
td {
border: 1px #cccccc solid; /* for cells preview */
height: 400px;
padding: 0;
}
td.middle {
text-align: center;
}
td.middle img {
max-width: 100%;
max-height: 100%;
}
</style>
<table>
<tr>
<td class="left">
Left cell content
</td>
<td class="middle">
<img src="http://themify.me/demo/themes/pinshop/files/2012/12/man-in-suit2.jpg">
</td>
<td class="right">
Right cell content
</td>
</tr>
</table>
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.