I want to create a small web widget, you can see it at this jsfiddle. Right now it is organized by placing lists within lists and content within those lists. All of this is supposed to sit, as a bar, fixed to the bottom of your window, over the current website. I want to know, is my list set up too cumbersome, and at the same time there a better(more efficient) way to use CSS to create this same layout?Here's what it looks like:HTML:<ul class=app_container_T t_ul>    <li>        <ul class=menu_T t_ul>            <li>                <button class=large_menu_button_T>+</button>                <button class=large_menu_button_T>T</button>                <button class=small_menu_button_T options>o</button>            </li>        </ul>    </li>    <li>        <ul class=container_element_T t_ul resizableui-widget-content id=1>            <li class=content_header_T>                <button class=t_intect_button close_button_T>-</button>                <form name=search_form class=search_form_T>                    <input type=text name=search_input class=search_bar_T></input>                    <button class=search_button_T name=search_button onclick=add_timeline_element></button>                </form>            </li>            <li class=content_container_T>                <button value=Timeline id=1 class=content_selection_button_T>Timeline</button>                <button value=Relevent id=1 class=content_selection_button_T>Relevent</button>                <button value=Mentions id=1 class=content_selection_button_T>Mentions</button>            </li>        </ul>    </li>    <li class=container_T>        <button class=t_intect_button close_button_T>-</button>        <textarea class=text_area_T warp=hard placeholder=place holder></textarea>        <button value=Add Photo class=composition_button_T photo_button_T></button>        <button value=Add Location class=composition_button_T location_button_T></button>        <textarea class=word_count_T></textarea>        <button value=Undo: Off class=composition_button_T Undo_button_T></button>        <button value=Submit class=composition_button_T send_button_T></button>    </li></ul>CSS:  /*------------------------------------------------------------------------------------*/  /*----Bar---*/  /*------------------------------------------------------------------------------------*/  .app_container_T {      position:fixed;      bottom: 0px;      left:0px;      z-index: 998;      padding: 0px;      height: 150px;      box-sizing: border-box;  }  .app_container_T > li {      /*create a class for them to share itll be faster, like t_ul*/      display: inline-block;      height: 100%;  }  .t_ul {      list-style: none;  }  .app_container_T * {      box-sizing: border-box;      border-radius:5px;      vertical-align: text-bottom;  }  /*------------------------------------------------------------------------------------*/  /*----Menu---*/  /*------------------------------------------------------------------------------------*/  .menu_buffer {      width: 60px;  }  .menu_T {      background-color:lightblue;      padding: 0px;      width:60px;      height: 100%;  }  .large_menu_button_T {      background: #0016f0;      color: #ffffff;      height: 50px;      width: 50px;      margin: 3px;      font-size: 20px;      border-radius:10px;  }  .small_menu_button_T {      background: #002aa9;      color: #ffffff;      height: 20px;      width: 20px;      margin: 1px;      font-size: 12px;  }  .options {      margin-left: 26px;  }  /*-------------------------------------------------------------------------------------*/  /*Selection Element*/  /*------------------------------------------------------------------------------------*/  .container_element_T {      background-color:red;      padding: 5px;      height: 100%;      width: 325px;  }  .content_header_T {      position: relative;      width: 100%;      height: 35px;  }  .content_header_T > * {      position: relative;  }  .close_button_T {      width: 20px;      height: 20px;      display: inline-block;      padding: 0;      margin: 0;      vertical-align: top  }  .search_form_T {      width: 90%;      height: 35px;      display: inline-block;  }  .content_title_T {      width: 90%;      height: 100%;      display: inline-block;  }  .content_container_T {      overflow: scroll;      width: 100%;      height: 100%;  }  .content_selection_button_T {      font-size: 100%;      width:100%;      height: 25%;  }  .content_list_T {      width: 100%;      height: 100%;      padding: 2px;      background: #0c5bd4;      overflow: auto;  }  .t_content {      width: 100%;      height: 50%;      background: #40aeee;      border: 1px solid #fffeda;  }  .t_content_container_image {      display: block;      margin: 0;      float: left;      height: 100%;      width: auto;  }  .t_content_container_text {      margin: 0;      overflow: hidden;      padding-left: 2px;      height: 100%;      width: initial;  }  /*-------------------------------------------------------------------------------------*/  /*Timeline Element*/  /*------------------------------------------------------------------------------------*/  .search_bar_T {      background-color:white;      box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;      border: 1px solid rgb(178, 210, 203);      border-radius: 8px;      font-size: 12px;      height: 100%;      width: 87%;  }  .search_button_T {      cursor: pointer;      border: 1px;      background-color: #d4d4d4;      font-family:'EntypoRegular';      color: #5f615c;      font-size: 30px;      height: 30px;      width: 30px;  }  /*-------------------------------------------------------------------------------------*/  /*Alt Element*/  /*------------------------------------------------------------------------------------*/  .container_T {      background-color:red;      padding: 5px;      height: 150px;      width: 325px;  }  .text_area_T {      height: 80%;      width: 90%;  }  .composition_button_T {      margin: 0px 2px;      height: 20%;      width: 10%;  }  .word_count_T {      height: 20%;      width: 10%;      background: transparent;      color: #b1b7b6;      margin: 0px 15%;  }
Am I over using  for layout?
html;css;layout