title: CSS positioning inside a DIV
body: <p>I have been using Position: Absolute for a long time now and I've come to the conclusion that its hopeless. I want my application to be a fluid layout so it scales with different resolutions.</p>
  
  <p>This is what I am trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/wuo8G.png" alt="enter image description here"></p>
  
  <p>The <strong>left</strong> hand side 3 calender controls on top of eachother which I have managed to achieve.</p>
  
  <p>The <strong>middle</strong> section is a DayPilot Calender control and below is a input which you can enter notes which I have managed to achieve.</p>
  
  <p>The <strong>right</strong> bit needs to be a panel where I can add labels, Drop down menus and other stuff for the user to add things to the calender, but I cant seem to put this there.</p>
  
  <p>Here is my css:</p>
  
  <pre><code>#body {
  height: 540px;  //This is the body section.
  }
  
  #dashboardinformataion { // this is the whole box you can see on the picture
  height: 481px;
  width: 80%;
  margin: 0 auto 0;
  display: flexbox;
  display: -ms-flexbox;
  }
  
  #txt_headernotes { // this is the input for the input saying 'Notes' in image.
  width: 100%;
  text-align: center;
  }
  
  #txt_displayinformation { // this is the input below the notes section.
  width: 100%;
  height: 12.5%;
  }
  
  #middlesection { // this is the DIV wrapping the calender and the 2 input boxes.
  height: 481px;
  }
  
  #calender_control { //This is in the Middle div above the notes input label.
  width: 700px !important;
  }
  </code></pre>
  
  <p>This is the HTML:</p>
  
  <pre><code>        &lt;div id="body"&gt;
          &lt;div id="dashboardinformataion"&gt;
              &lt;DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
                  BoundDayPilotID="calender_control" 
                  SelectMode="Month"
                  ShowMonths="3"
                  SkipMonths="3"
  
  
                  DataStartField="start"
                  DataEndField="end" 
                  VisibleRangeChangedHandling="CallBack"
                  OnVisibleRangeChanged="DayPilotNavigator1_VisibleRangeChanged"
  
                  &gt;
              &lt;/DayPilot:DayPilotNavigator&gt;
  
              &lt;div id="middlesection"&gt;
                  &lt;DayPilot:DayPilotMonth CssClassPrefix="bsimplexcalender" OnCommand="calender_control_Command" ContextMenuID="menu" EventRightClickHandling="ContextMenu" EventRightClickJavaScript="select(e)" BubbleID="DayPilotBubble1" ClientObjectName="dpm" runat="server" ID="calender_control" Theme="bsimplexcalender" HeightSpec="Auto" Height="0" MinCellHeight="63" DataStartField="start" DataEndField="end" DataTextField="name" DataValueField="id" OnBeforeEventRender="calender_control_BeforeEventRender" /&gt;
                  &lt;input runat="server" id="txt_headernotes" placeholder="Notes" /&gt;
                  &lt;input runat="server" id="txt_displayinformation" /&gt;
              &lt;/div&gt;
  
              &lt;asp:Panel ID="Panel1" runat="server" BackColor="Black"&gt;&lt;/asp:Panel&gt;
  
  
  
         &lt;/div&gt;
  </code></pre>
  
  <p><strong>Is my positioning correct and how do i get a panel on the right hand side with a width of 140px</strong></p>
  
  <p>EDIT: My CodePen  www.codepen.io/anon/pen/snJAc <strong>pLoory Thanks</strong></p>