Posicionamiento CSS dentro de un DIV

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.

Esto es lo que estoy tratando de lograr:

enter image description here

LA izquierda hand side 3 calender controls on top of eachother which I have managed to achieve.

LA medio section is a DayPilot Calender control and below is a input which you can enter notes which I have managed to achieve.

LA Derecho 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.

Aquí está mi css:

#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;
}

Este es el HTML:

        <div id="body">
        <div id="dashboardinformataion">
            <DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
                BoundDayPilotID="calender_control" 
                SelectMode="Month"
                ShowMonths="3"
                SkipMonths="3"


                DataStartField="start"
                DataEndField="end" 
                VisibleRangeChangedHandling="CallBack"
                OnVisibleRangeChanged="DayPilotNavigator1_VisibleRangeChanged"

                >
            </DayPilot:DayPilotNavigator>

            <div id="middlesection">
                <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" />
                <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>

Is my positioning correct and how do i get a panel on the right hand side with a width of 140px

EDIT: My CodePen www.codepen.io/anon/pen/snJAc pLoory Thanks

preguntado el 12 de junio de 14 a las 10:06

since you are using display: flexbox; ... You should try to use it's special properties to set your layout.. you need to think in terms of 3 columns and not 1 middle column, for reference: css-tricks.com/snippets/css/a-guide-to-flexbox -

@webkit Do I have to have 3 different DIV tags? That's why it isn't working? and I will check it the flexbox properties. -

If you want a responsive layout, it makes more sense to mark up your code in the same logic as your sketch.. so yes, use 3 divs, that way it would be easier to control the elements inside each container in your responsive css. -

philipwalton.github.io/solved-by-flexbox/demos/holy-grail -

@webkit I made 3 divs but i still cant see my third div? -

1 Respuestas

<div id="hold">
width:500px; margin: 0 auto;

<div id="left">
height: 500px;
width:100px;

</div>

<div id="middleHold">
float:left;

<div id="middle1">
height: 250px;
width: 300px;
</div>

<div id="middle2">
height: 50px;
width: 300px;
</div>

<div id="middle3">
height: 200px;
width: 300px;
</div>

</div> <!-- end #middleHold -->

<div id="right">
width: 100px;
height: 500px;
float:left;
</div>

</div> <!-- end #hold -->

Heres the id's and just add the css to them.

Respondido el 12 de junio de 14 a las 10:06

Your using PX? doesn't this mean it wont scale? - ben clarke

Yes, just change it to %? I'd suggest you use a already build grid system. Bootstrap or RocketCSS or something. - raul khosla

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.