Tara Wilfred Tara Wilfred - 1 year ago 44
CSS Question

Format a an HTML table elements

This really seems trivial but I'm unable to attain the intended. I'm trying to add a new element to the toolbox(a table within a division). But the newly added element is out of alignment.


and the
Window query
keep overlapping as shown below.

HTML Table

<div style="float: left;" class="toolbox" id="toolbox">
<label class="col-md-4 control-label">Simple Query</label>
<div class="squery" id="rId"></div>
<label class="col-md-4 control-label">Pass-through</label>
<div class="nElem" id="lId"></div>
<label class="col-md-4 control-label">Window Query</label>
<div class="wquery" id="wId"></div>

CSS Class
for the Pass-through

The classes for the other elements, simple query, window query, are all the same as the Pass-through's class. The only difference is the color.

.nElem {
border: 1px solid #346789;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
width: 120px;
height: 72px;
line-height: 80px;
cursor: pointer;
text-align: center;
z-index: 20;
position: absolute;
background-color: darkslateblue;
color: black;
font-family: helvetica, sans-serif;
padding: 0.5em;
font-size: 0.9em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;

Toolbox(Division within which the table is created) class

.toolbox {
margin: 0 auto;
margin-left: 10px;
width: 230px;
padding: 20px;
font-family: "Helvetica";
font-size: small;
background: #f4f4f4;
border-radius: 3px;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

Answer Source

Your code is not enough to understand what's exactly wrong. But I'm sure that the main problem is caused by position: absolute; for .nElem, .squery, .wquery and so on. So remove this property and look again. I tried to solve your problem here: http://codepen.io/g1un/pen/ozZNkL

.nElem {
    /*position: absolute;*/