how do I make multiple divs width change dynamically with out overlapping when window size changes

Question

I have a div with three divs inside of different width. when my window size changes it is overlapping each other.How do I make content remain without overlapping when window size changes. Here is my code.

#topBarContainer{
   background-color: blue; 
}

#topBarLeft{
    width: 14%;
    text-align: center;
}
#topBarMiddle{
    width: 26%;    
    text-align: center;
}
#topBarRight{
    width: 60%;
    text-align: right;
}
.topBar {
  margin-right: -4px;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 3px;
}

<div id="topBarContainer">
    <!--TopBar-->
    <div id="topBarLeft" class="topBar">
        <input type="button" ng-click="newMenuType('message')"  value="New" id="newButton">     
    </div>
    <!--Top Bar Middle-->
    <div id="topBarMiddle" class="topBar">
        <div class="searchBoxContainer">
        <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
        <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
        </div>          
    </div>
    <!--Top Bar Right-->
    <div id="topBarRight" class="topBar">
        <div>   
            <div class="loginRow">Hi{{loginName()}}</div> 
            <div ng-if="emailIcon()"  class="iconRow">
                <i class="fa fa-reply"></i>
            </div>
            <div ng-if="emailIcon()" class="iconRow">
                <i class="fa fa-reply-all"></i>
            </div>
            <div ng-if="emailIcon()"  class="iconRow" >
                <i class="fa fa-reply fa-flip-horizontal"></i>
            </div>
            <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
                <i class="fa fa-trash"></i>            
            </div>
        </div>
    </div>
</div>  

It is looking good with normal window when I resize window it is overlapping all.leftBar takes 14%and middle bar takes 26% and rest for the right container. I am spenting days to fix this. I need to align all so that all 3 sections display in the same line.

Answer 1

you can use display:flex from flexbox

body {
  margin: 0
}
#topBarContainer {
  background-color: blue;
  display: flex;
}
#topBarLeft {
  width: 14%;
  text-align: center;
}
#topBarMiddle {
  text-align: center;
  background: red;
  width: 35%
}
#topBarRight {
  text-align: right;
  background: green;
  flex: 1
}
#topBarRight > div {
  display: inline-flex
}
.topBar {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 3px;
}
#topBarRight >div:last-of-type {
  text-align: center
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id="topBarContainer">
  <!--TopBar-->
  <div id="topBarLeft" class="topBar">
    <input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
  </div>
  <!--Top Bar Middle-->
  <div id="topBarMiddle" class="topBar">
    <div class="searchBoxContainer">
      <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
      <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
    </div>
  </div>
  <!--Top Bar Right-->
  <div id="topBarRight" class="topBar">
    <div>
      <div class="loginRow">Hi{{loginName()}}</div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply-all"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply fa-flip-horizontal"></i>
      </div>
      <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
        <i class="fa fa-trash"></i> 
      </div>
      <div ng-show="canMoveToFolder()" class="iconRow" ng-mouseover="newIcon = true" ng-mouseleave="newIcon = false"> <i class="fa fa-folder-o"> </i> 
        <div ng-if="newIcon" id="newItemOptions">
          <label class='newItemLabel' ng-click="moveMessageToFolder(3)">Inbox</label>
          <label class='newItemLabel' ng-click="moveMessageToFolder(4)">Sent</label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Why are all elements moved right with that negative margin on the .topBar class? I would just erase that, and add box-sizing: border-box; to .topBar (just to be on the safe side for percentage widths and heights).

So you'd have

.topBar {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 3px;
}

Answer 3

I'm not sure if it is what you are looking for but if you put your searchBoxContainer in display:flex; it shud solwe the problem cause it puts your searchBoxIcon in front of the searchBox it self

you have to pu in your css

.searchBoxContainer{
  display:flex;
}

#topBarContainer{
   background-color: blue; 
}

#topBarLeft{
    width: 14%;
    text-align: center;
}
#topBarMiddle{
    width: 26%;    
    text-align: center;
}
#topBarRight{
    width: 60%;
    text-align: right;
}
.topBar {
  margin-right: -4px;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 3px;
}
.searchBoxContainer{
  display:flex;
}

<div id="topBarContainer">
    <!--TopBar-->
    <div id="topBarLeft" class="topBar">
        <input type="button" ng-click="newMenuType('message')"  value="New" id="newButton">     
    </div>
    <!--Top Bar Middle-->
    <div id="topBarMiddle" class="topBar">
        <div class="searchBoxContainer">
        <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
        <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
        </div>          
    </div>
    <!--Top Bar Right-->
    <div id="topBarRight" class="topBar">
        <div>   
            <div class="loginRow">Hi{{loginName()}}</div> 
            <div ng-if="emailIcon()"  class="iconRow">
                <i class="fa fa-reply"></i>
            </div>
            <div ng-if="emailIcon()" class="iconRow">
                <i class="fa fa-reply-all"></i>
            </div>
            <div ng-if="emailIcon()"  class="iconRow" >
                <i class="fa fa-reply fa-flip-horizontal"></i>
            </div>
            <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
                <i class="fa fa-trash"></i>            
            </div>
        </div>
    </div>
</div>