htmlまたはcssでのデザイン問題

Question

私は文字通りデザインに文字通り怒っています。私はそれに多くの時間を与えており、結果は横に最小化すると本当に面倒です。それはまたそれで最小化する。どのように私はそれを防ぐのですか？私は単純なスクロールバーをフォームやデザインを最小限に抑えてその位置にとどまるようにしたいだけです。

これは設計されたページのいずれかです。IMAGE 1

、これは水平に最小化したときに何が起こるかです：IMAGE 2

私はこれを防ぐにはどうすればよいです。私はそれを試して、それは動作していません。私はグーグルでしたが、私はこれを解決することができませんでした。ヘルプは本当に非常に感謝される、ありがとう！

編集：次のコードをご覧ください。

/*member login panel*/ 
 

 
.h3attendancelogin{ 
 
    margin-top:0; 
 
    margin-bottom: 0; 
 
    padding-top: 100px; 
 
} 
 

 
#h3login-div{ 
 
    text-align: center; 
 
} 
 

 
#checkin-out{ 
 
    margin-top:0px; 
 
    margin-left:400px; 
 
    margin-right:400px; 
 
    padding-bottom: 100px; 
 
} 
 

 
#checkheading{ 
 
    background-color: #CCC; 
 
    border-bottom: 2px solid #808080; 
 
    text-align: center; 
 
    padding-top: 5px; 
 
} 
 

 
#check-tbl-div{ 
 
    background-color: #CCC; 
 
    text-align:center; 
 
    padding-top: 5px; 
 
} 
 

 
#check-tbl { 
 
    margin-left: 110px; 
 
}

<div class="scroll"> 
 
    <asp:Panel ID="PanelEmployeeLogin" runat="server" CssClass="employeelogin"> 
 
      <div> 
 
       <div id="h3login-div"> 
 
        <h3 class="h3attendancelogin">Insert Correct Username and Password to start or stop the Payroll</h3> 
 
        <asp:Label ID="Label_Successful" ForeColor="Green" Font-Size="Larger" runat="server" Text=""></asp:Label><br /> 
 
        <asp:LinkButton Font-Size="Large" ID="LinkButton_redirect_addpayroll" runat="server" OnClick="LinkButton_redirect_addpayroll_Click">Add Payroll for this employee now?</asp:LinkButton> 
 
       </div> 
 
       <div id="checkin-out"> 
 
        <div id="checkheading"> 
 
         Every user's attendance session will expire in 4 hours<br /> 
 
         <asp:Label ID="Label_attendance_message" runat="server" Text="" Visible="false"></asp:Label> 
 
        </div> 
 
        <div id="check-tbl-div"> 
 
         <table id="check-tbl"> 
 
          <tr> 
 
           <td>UserName: 
 
           </td> 
 
           <td> 
 
            <asp:TextBox ID="TextBox_checkuser" runat="server"></asp:TextBox> 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td>Password: 
 
           </td> 
 
           <td> 
 
            <asp:TextBox ID="TextBox2_checkpass" runat="server" TextMode="Password"></asp:TextBox> 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td></td> 
 
           <td> 
 
            <asp:Button ID="Button1_checkin" runat="server" Text="Check IN" OnClick="Button1_checkin_Click" /> 
 
            <asp:Button ID="Button2_checkout" runat="server" Text="Check Out" OnClick="Button2_checkout_Click" /> 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td> 
 
            <asp:LinkButton ID="LinkButton_forgotpass" runat="server" OnClick="LinkButton_forgotpass_Click">Forgot password?</asp:LinkButton> 
 
           </td> 
 
           <td> 
 
            <asp:LinkButton ID="LinkButton1_signup" runat="server" OnClick="LinkButton1_signup_Click">Signup</asp:LinkButton> 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </asp:Panel> 
 
    </div>

Answer 1

ちょうどあなたがフィドルやペンでマークアップを提供してくださいすることができ、それをwidth: 70%;

Answer 2

短い答え：

ブートストラップや財団

長い答え：割合の代わりに、ピクセルでより多くの仕事と固定/絶対位置に非常に注意してください。