Position: Fixed makes div go out of page

Question

The problem is that my ASP controls go out of bounds on the right side of the screen when using the .Fixed class from my CSS. I tried the 'right: 0; thing but no luck...

See this image.

CSS:

#parent {
    display: inline-flex;
}

#narrow {
    width: 1000px;
    margin-right: 20px;
}

#wide {
    width: 100%;
}

.FullWidth {
    width:100%;
}

.Fixed {
position: fixed;
}

Short HTML (in asp.net)

<div id="parent">
  <div id="narrow">
    Contains left gridview
  </div>
  <div id="parent">
    <div id="narrow">
      Gridview
    </div>
    <div id="wide" class="Fixed">
      <div>
        FormView
      </div>
      <div>
        Contains label and textbox
      </div>
    </div>
    <br />
    <div>
      Contains right gridview
    </div>
    <hr />
    <div>
      Contain textbox and button
    </div>
  </div>
</div>

Complete HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Security.Master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Reports_Read.aspx.cs" Inherits="SecurityV3_Web.ContentPages.Reports.Reports_Read" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="parent">
                <div id="narrow">
                    <asp:GridView ID="grdReports" runat="server" DataKeyNames="ReportID" AutoGenerateColumns="false" OnRowDataBound="grdReports_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                        <Columns>
                            <asp:BoundField HeaderText="ID" DataField="ReportID" ItemStyle-Width="40px" />
                            <asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
                            <asp:BoundField HeaderText="Agent" DataField="Name" />
                            <asp:BoundField HeaderText="Location" DataField="Location" />
                            <asp:BoundField HeaderText="Header" DataField="Heading" />
                        </Columns>
                    </asp:GridView>
                </div>
                    <div id="wide" class="Fixed">
                        <div>
                            <asp:FormView ID="FormView1" runat="server" CssClass="FullWidth">
                                <EmptyDataTemplate>
                                    <p>No data to show. Select a report.</p>
                                </EmptyDataTemplate>
                                <ItemTemplate>
                                    <div>
                                        <asp:Label ID="Label1" runat="server" Text="Heading"></asp:Label>
                                        <asp:TextBox ID="txtHeading" runat="server" Text='<%# Eval("Heading") %>'></asp:TextBox>
                                    </div>
                                    <div>
                                        <asp:Label ID="Label2" runat="server" Text="Report"></asp:Label><br />
                                        <asp:TextBox ID="txtReport" runat="server" Text='<%# Eval("Report1") %>' Height="200px" CssClass="FullWidth" TextMode="MultiLine"></asp:TextBox>
                                    </div>
                                </ItemTemplate>
                            </asp:FormView>
                        </div>
                        <br />
                        <div>
                            <asp:GridView ID="grdReplies" runat="server" DataKeyNames="ReportReplyID" AutoGenerateColumns="false">
                                <Columns>
                                    <asp:BoundField HeaderText="ID" DataField="ReportReplyID" ItemStyle-Width="40px" />
                                    <asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
                                    <asp:BoundField HeaderText="Agent" DataField="Name" ItemStyle-Width="100px" />
                                    <asp:BoundField HeaderText="Reply" DataField="Reply1" />
                                </Columns>
                            </asp:GridView>
                        </div>
                        <hr />
                        <div>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required" CssClass="Foutmelding" ControlToValidate="txtReply"></asp:RequiredFieldValidator>
                            <asp:TextBox ID="txtReply" runat="server" TextMode="MultiLine"></asp:TextBox>
                            <br />
                            <asp:Button ID="btnSaveReply" runat="server" Text="Reply" OnClick="btnSaveReply_Click" />
                        </div>
                    </div>
                </div>

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Fiddle

You say you removed width:100%; from your .wide class and did position: fixed/absolute right: 0; and it still gives the same result? Because it appears to work fine doing that for me. It's your width:100% that's doing it. — Chris W., Mar 30 '16 at 20:51
When I place it at right: 0, it takes up the whole page, I want it to take up the remaining space. — Hypenate, Mar 31 '16 at 03:59

score 0 · Answer 1 · answered Mar 30 '16 at 20:53

0

right: 0 is just aligning the fixed element to the right, however it is still full width from the wide ID which makes it take up the whole page. Is { width: auto; right: 0; } an option? That sounds like it would do what you want it to

answered Mar 30 '16 at 20:53

Requisit

64
4

Position: Fixed makes div go out of page

1 Answers1