Сосредоточение вложенных отделений и дизайна заголовка таблицы

Я - новичок когда дело доходит до CSS, кто-либо может помочь мне с сосредоточением 3-уровневые отделения? Вещь - ширина, неизвестно, так как я использую %. Я уже попробовал край: автомобиль; , но не работал.

And am also facing another problem with table headers and footers. I've tried putting up a horizontal line with

Click here to view my current code on jsbin

<div style="overflow: auto; height: 100%;padding:1% 0% 0% 0.5%;margin:0 auto;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background: #E0E0E0 !important;border: 1px solid #808080;">
<div style="width:45%;margin: 0 1.5%;float:left;">
    <div style="width: 100%;text-align: right !important;white-space: nowrap;">
        Select  
        
            Please select
                Option 1
                Option 2
                Option 3
                Option 4
                Option 5
        
    </div>
    <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA" >
        <div class="taskhead" style="margin-bottom: -90px !important;padding: 5px;background-color: #ccffff;height: 200px;margin: auto;border-radius: 5px;border: 1px solid #808080;">
            <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
                Name:
                <div id="er_users" style="width: 100%;overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
                    <table id="uid" style="width: 100%;margin-left: 5px; float: right;">
                        <thead style="background-color: #e0e0e0">
</thead>
                        <tbody>
                            <tr class="odd">
                                <td>Name 1</td>
                            </tr>
                            <tr class="even">
                                <td>Name 1</td>
                            </tr>
                            <tr class="odd">
                                <td>Name 2</td>
                            </tr>
                            <tr class="even">
                                <td>Name 2</td>
                            </tr>
                        </tbody>
                        

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin: 0 1.5%; background-color: #D6D2D2 !important;width:0.2%;height: 265px !important;float:left;"> 
</div>
<div style="width:45%;margin: 0 1%;float:left;">
    <div style="margin-top: 1%"></div>
    User

    <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA;" >
        <div style="margin-bottom: -100px !important;padding: 5px;background-color: #e6f0a3;height: 200px;border-radius: 5px;border: 1px solid #808080;">
            <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
                Name:
                <div style="width: 100%; overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
                    <table id="uid" style="width: 100%;margin-left: 5px; float: right;">
                        <thead style="background-color: #e0e0e0">
</thead>
                        <tbody>
                            <tr class="odd">
                                <td>Name 1</td>
                            </tr>
                            <tr class="even">
                                <td>Name 1</td>
                            </tr>
                            <tr class="odd">
                                <td>Name 2</td>
                            </tr>
                            <tr class="even">
                                <td>Name 2</td>
                            </tr>
                        </tbody>
                        

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

This is the way my table should look like

Click here to view the image