page.css
#container {
width:100%;
height:75%;
}
#one {
width:50%;
height:75%;
float:left;
}
#two {
width:50%;
height:75%;
float:left;
}
#three {
width:100%;
height:25%;
float:left;
}
#four {
width:20%;
height:15%;
float:left;
}
#one-switch
{
width:75%;
height:75%;
}
.col-lg
{
width:100%;
}
.col-md
{
width:105%;
}
.col-sm
{
width:105%;
}
.col-xs
{
width:105%;
}
pagesplit.css
#container
{
width: 100%;
height: 100%;
}
#innerContainer1
{
width: 100%;
height: 33%;
}
#oneP
{
width: 34%;
height: 99%;
float: left;
}
#twoP
{
width: 34%;
height: 99%;
float: left;
}
#threeP
{
width: 29%;
height: 99%;
float: left;
}
#innerContainer2
{
width: 100%;
height: 25%;
}
#fourP
{
width: 99%;
height: 99%;
float: left;
}
#innerContainer3
{
width: 100%;
height: 33%;
}
#fiveP
{
width: 34%;
height: 99%;
float: left;
}
#sixP
{
width: 34%;
height: 99%;
float: left;
}
#sevenP
{
width: 29%;
height: 99%;
float: left;
}
#innerContainer4
{
width: 100%;
height: 9%;
}
#eightP
{
width: 100%;
height: 99%;
float: left;
}
page.aspx
<div id="container">
<div id="innerContainer1">
<div id="oneP">
<p>
<asp:Label ID="Label2" runat="server" Text="PP. No." class="col-xs-offset-1 col-sm-offset-1 col-md-offset-0 col-lg-offset-0 col-xs-4 col-sm-4 col-md-3 col-lg-3"></asp:Label>
<asp:TextBox ID="txtPONo" runat="server" AutoPostBack="True" class="input-sm"></asp:TextBox>
</p></div>
<div id="twoP">
<p>
<asp:Label ID="Label6" runat="server" Text="PP. End Date." class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-0 col-xs-0 col-sm-0 col-md-3 col-lg-3"></asp:Label>
<asp:TextBox ID="txtPPEndDate" runat="server" AutoPostBack="True" class="input-sm"></asp:TextBox>
</p>
</div></div>
#container {
width:100%;
height:75%;
}
#one {
width:50%;
height:75%;
float:left;
}
#two {
width:50%;
height:75%;
float:left;
}
#three {
width:100%;
height:25%;
float:left;
}
#four {
width:20%;
height:15%;
float:left;
}
#one-switch
{
width:75%;
height:75%;
}
.col-lg
{
width:100%;
}
.col-md
{
width:105%;
}
.col-sm
{
width:105%;
}
.col-xs
{
width:105%;
}
pagesplit.css
#container
{
width: 100%;
height: 100%;
}
#innerContainer1
{
width: 100%;
height: 33%;
}
#oneP
{
width: 34%;
height: 99%;
float: left;
}
#twoP
{
width: 34%;
height: 99%;
float: left;
}
#threeP
{
width: 29%;
height: 99%;
float: left;
}
#innerContainer2
{
width: 100%;
height: 25%;
}
#fourP
{
width: 99%;
height: 99%;
float: left;
}
#innerContainer3
{
width: 100%;
height: 33%;
}
#fiveP
{
width: 34%;
height: 99%;
float: left;
}
#sixP
{
width: 34%;
height: 99%;
float: left;
}
#sevenP
{
width: 29%;
height: 99%;
float: left;
}
#innerContainer4
{
width: 100%;
height: 9%;
}
#eightP
{
width: 100%;
height: 99%;
float: left;
}
page.aspx
<div id="container">
<div id="innerContainer1">
<div id="oneP">
<p>
<asp:Label ID="Label2" runat="server" Text="PP. No." class="col-xs-offset-1 col-sm-offset-1 col-md-offset-0 col-lg-offset-0 col-xs-4 col-sm-4 col-md-3 col-lg-3"></asp:Label>
<asp:TextBox ID="txtPONo" runat="server" AutoPostBack="True" class="input-sm"></asp:TextBox>
</p></div>
<div id="twoP">
<p>
<asp:Label ID="Label6" runat="server" Text="PP. End Date." class="col-xs-offset-0 col-sm-offset-0 col-md-offset-0 col-lg-offset-0 col-xs-0 col-sm-0 col-md-3 col-lg-3"></asp:Label>
<asp:TextBox ID="txtPPEndDate" runat="server" AutoPostBack="True" class="input-sm"></asp:TextBox>
</p>
</div></div>