NickD NickD - 4 months ago 25
CSS Question

3 divs 33.3% absolute centered

I am trying to create 3 div's inside parent, but no luck to any attempt i was made.. (that's what i am getting http://prnt.sc/bytx6l)

The idea is to create 3 div's 33% height (i dont want to use height by 137 pixels each).
The second is to have absolute centered any content inside 3 div's.
(that's what i want http://prnt.sc/bytzu1)
PS. I dont want to use just divs

What i am doing wrong? Any help?



body {background-color: #111;margin-left: 0px;margin-right: 0px;margin-bottom: 0px; color: #ffffff;}
#tbl {display: table; width:100%; margin-top:-4px;}
#row {display: table-row; width:100%;}
.title {font-weight:400; font-size: 170%; color:#ebebeb;}
#a {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
width:170px; text-align: center; }
#a-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#a-left {height: 100%; width:100%; display:block; background-color: rgba(31,30,30,1);}
#empty {display: table-cell; background-color: #3a3a39; width:10px; text-align: center; }
#b {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
width:170px; text-align: center; }
#b-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#b-left {height: 100%; width:100% ;display:block; background-color: rgba(31,30,30,1);}
.j-left {border:1px solid #dc6210; margin:-1px 4px -1px -4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.j-right {border:1px solid #dc6210; margin-right:2px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#spacer {display: table-row; height: 6px;}
#block {width:100%; height: 33% /*137px*/;}

<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;">&nbsp;</div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>




Answer

Because #a-choose and #a-left is relative position (by default), height: 33% of #block can not be calculated.

So, you should add style position: absolute to #a-left and position: relative to #a-choose.

This will be helpful.

body {
    background-color: #111;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color: #ffffff;
}

#tbl {
    display: table;
    width: 100%;
    margin-top: -4px;
}

#row {
    display: table-row;
    width: 100%;
}

.title {
    font-weight: 400;
    font-size: 170%;
    color: #ebebeb;
}

#a {
    display: table-cell;
    background-color: #3a3a39;
    padding: 0px 0px 0px 6px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 170px;
    text-align: center;
}

#a-choose {
    display: table-cell;
    background-color: #3a3a39;
    text-align: center;
    width: 40%;
    position: relative;
}

#a-left {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    background-color: rgba(31, 30, 30, 1);
}

#empty {
    display: table-cell;
    background-color: #3a3a39;
    width: 10px;
    text-align: center;
}

#b {
    display: table-cell;
    background-color: #3a3a39;
    padding: 0px 0px 0px 6px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 170px;
    text-align: center;
}

#b-choose {
    display: table-cell;
    background-color: #3a3a39;
    text-align: center;
    width: 40%;
    position: relative;
}

#b-left {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    background-color: rgba(31, 30, 30, 1);
}

.j-left {
    border: 1px solid #dc6210;
    margin: -1px 4px -1px -4px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.j-right {
    border: 1px solid #dc6210;
    margin-right: 2px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#spacer {
    display: table-row;
    height: 6px;
}

#block {
    width: 100%;
    height: 33% /*137px*/;
}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
    <div id="tbl">    
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="title">1</div>
            <div id="a-choose">
            </div>
            <div id="empty"></div>
            <div id="b-choose">
            </div>
            <div id="b" class="title">2</div>
        </div>
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
                <div id="a-choose" style="border:1px solid #dc6210;">
                    <div id="a-left">
                        <div id="block" style="">a</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
                        <div id="block" style="">a</div>
                    </div>
                </div>
            <div id="empty" style="background-color: transparent;">&nbsp;</div>
                <div id="b-choose" style="border:1px solid #dc6210;">
                    <div id="b-left">
                        <div id="block" style="">b</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
                        <div id="block" style="">b</div>
                    </div>
                </div>
            <div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
        </div>
        <div id="spacer"></div>
    </div>
</div>

Comments