Search code examples
htmlcsscell

Div table cells do not have the same width

The widths are uneven for the table cells defined inside the table, I cant figure out why? Also apologies for the bad coding practice

Fiddle:JsFiddle Link

This the html. The table is desfined in the div class="mainstuff"

<body>
<div id="maincontainer">
    <div class="topbar">
        <div class="logo">
            Codeplayer
        </div>
        <div class="tabs">
            <ul>
                <li class="l">HTML</li>
                <li class="l1">CSS</li>
                <li class="l2">JS</li>
                <li class="l3">Result</li>
            </ul>
        </div>
        <div class="run">
            <button id="but">Run</button>
        </div>
    </div>
    <div class="clear"></div>

    <div class="mainstuff">
        <div class="row">
            <div class="Html">HTML</div>
            <div class="CSS">CSS</div>
            <div class="JS">JS</div>
            <div class="Result">Result</div>
        </div>
    </div>
</div>

</body>

</html>

This is the related css.

  .topbar {
    background-color: #D0D5DB;
    width: 100%;
    height: 40px;
    border-bottom-width: thick;
}
body {
    margin: 0;
    padding: 0;
}
.logo {
    font-size: 1.8em;
    font-weight: bold;
    padding: 3px 2px;
    float: left;
}
.run {
    float: right;
    margin-top: -5px;
    padding: 6px 2px;
}
#but {
    padding-left: 15px;
    border-radius: 5px;
}
button {
}
ul {
    list-style: none;
    margin: 0;
}
.tabs {
    margin: 0 auto;
    width: 240px;
    padding-top: 5px;
}
.l {
    float: left;
    border-color: #808080;
    border-style: solid;
    margin: 3px;
}
li:hover {
    background-color: #808081;
}
.clear {
    clear: both;
}
.mainstuff {
    display: table;
    width: 100%;
}
.Html {
    display: table-cell;
    height: 100vh;
    margin: 0;
    background-color: red;
}
.CSS {
    display: table-cell;
    height: 100vh;
    margin: 0;
    background-color: yellow;
}
.JS {
    display: table-cell;
    height: 100vh;
    margin: 0;
    background-color: blue;
}
.Result {
    display: table-cell;
    height: 100vh;
    margin: 0;
    width: auto;
    background-color: green;
}
.l1 {
    float: left;
    border-color: #808080;
    border-style: solid;
    margin: 3px;
}
.l2 {
    float: left;
    border-color: #808080;
    border-style: solid;
    margin: 3px;
}
.l3 {
    float: left;
    border-color: #808080;
    border-style: solid;
    margin: 3px;
}
.row {
    display: table-row;
}
Solution

  • Use table-layout:fixed for your table.

    .mainstuff {
display: table;
width: 100%;
table-layout:fixed;
}

    DEMO