After using Position: Absolute for a while, I have realized that it's not working for my needs. I want my application to have a fluid layout that can adapt to different resolutions.
My goal is to achieve the following:
The left side features 3 calendar controls stacked on top of each other, which I've successfully implemented.
The middle section includes a DayPilot Calendar control, with an input field below to enter notes, both of which I've managed to include.
On the right side, I need a panel where users can add labels, dropdown menus, and more related to the calendar, but I'm struggling to position this correctly.
Below is a snippet of my CSS code:
#body {
height: 540px;
}
#dashboardinformataion {
height: 481px;
width: 80%;
margin: 0 auto 0;
display: flexbox;
display: -ms-flexbox;
}
#txt_headernotes {
width: 100%;
text-align: center;
}
#txt_displayinformation {
width: 100%;
height: 12.5%;
}
#middlesection {
height: 481px;
}
#calender_control {
width: 700px !important;
}
Here is the corresponding HTML code:
<div id="body">
<div id="dashboardinformataion>
<DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server"
BoundDayPilotID="calendar_control"
SelectMode="Month"
ShowMonths="3"
SkipMonths="3"
DataStartField="start"
DataEndField="end"
VisibleRangeChangedHandling="CallBack"
OnVisibleRangeChanged="DayPilotNavigator1_VisibleRangeChanged">
</DayPilot:DayPilotNavigator>
<div id="middlesection">
<DayPilot:DayPilotMonth CssClassPrefix="bsimplexcalendar" OnCommand="calendar_control_Command" ContextMenuID="menu" EventRightClickHandling="ContextMenu" EventRightClickJavaScript="select(e)" BubbleID="DayPilotBubble1" ClientObjectName="dpm" runat="server" ID="calendar_control" Theme="bsimplexcalendar" HeightSpec="Auto" Height="0" MinCellHeight="63" DataStartField="start" DataEndField="end" DataTextField="name" DataValueField="id" OnBeforeEventRender="calendar_control_BeforeEventRender" />
<input runat="server" id="txt_headernotes" placeholder="Notes" />
<input runat="server" id="txt_displayinformation" />
</div>
<asp:Panel ID="Panel1" runat="server" BackColor="Black"></asp:Panel>
</div>
Am I positioning elements correctly? How do I place a panel on the right-hand side with a width of 140px?
EDIT: Here's the link to my CodePen: www.codepen.io/anon/pen/snJAc Thank you in advance!