- will design be affected in browsers?
- <div id="SRForm">
- <h1>Room Reservation</h1>
- <div id="SRLeft">
- <ul>
- <li>Check Availability</li>
- <li class="status">Select Room</li>
- <li>Enter Details </li>
- <li>Review Reservation & Confirm</li>
- </ul>
- </div>
- <div id="RoomType">
- <div id="Room1">
- <div class="imgdetails">
- <img class="SRimg" src="images/rooms/regular-room.jpg"/>
- </div>
- <div class="roomdetails">
- <h3>Regular Room</h3>
- <asp:Label runat="server" id="lblroom1" class="lblroom">Available:</asp:Label>
- <asp:Label runat="server" id="lblroom2" class="lblroom">no of rooms</asp:Label>
- <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
- <asp:CheckBox ID="CheckBox1" runat="server" />
- <asp:DropDownList ID="cboroom1" class="cboroom" runat="server">
- <asp:ListItem>1</asp:ListItem>
- <asp:ListItem>2</asp:ListItem>
- <asp:ListItem>3</asp:ListItem>
- </asp:DropDownList>
- </div>
- <div >
- </div>
- </div>
- <div id="Room2">
- <div class="imgdetails">
- <img class="SRimg" src="images/rooms/regular-room.jpg"/>
- </div>
- <div class="roomdetails">
- <h3>Delux Room</h3>
- <asp:Label ID="lblroom3" runat="server" class="lblroom">Available:</asp:Label>
- <asp:Label ID="lblroom4" runat="server" class="lblroom">no of rooms</asp:Label>
- <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
- <asp:CheckBox ID="CheckBox2" runat="server" />
- <asp:DropDownList ID="DropDownList2" class="cboroom" runat="server">
- <asp:ListItem>1</asp:ListItem>
- <asp:ListItem>2</asp:ListItem>
- <asp:ListItem>3</asp:ListItem>
- </asp:DropDownList>
- </div>
- <div class="rate">
- <p class="proom">Charge Per Night:</p>
- <asp:label runat="server" class="lblrate">3000INR</asp:label>
- </div>
- </div>
- <div id="Room3">
- <div class="imgdetails">
- <img class="SRimg" src="images/rooms/regular-room.jpg"/>
- </div>
- <div class="roomdetails">
- <h3>Super-Delux Room</h3>
- <asp:Label ID="lblroom5" runat="server" class="lblroom">Available:</asp:Label>
- <asp:Label ID="lblroom6" runat="server" class="lblroom">no of rooms</asp:Label>
- <p class="roompara">Well appointed environment friendly rooms with all the facilities available.</p>
- <asp:CheckBox ID="CheckBox3" runat="server" />
- <asp:DropDownList ID="DropDownList3" class="cboroom" runat="server">
- <asp:ListItem>1</asp:ListItem>
- <asp:ListItem>2</asp:ListItem>
- <asp:ListItem>3</asp:ListItem>
- </asp:DropDownList>
- </div>
- <div >
- </div>
- </div>
- </div>
- </div>
- here is css
- #SRForm { margin:0; padding:0; width:900px; height:700px;}
- #SRForm h1 { text-align:center; font-size:20px; margin: 20px 0; font-weight:bold;}
- #SRLeft { width:200px; float:left; padding:10px 10px; margin-right:10px; }
- #SRLeft ul { list-style:none; margin:0; padding:0; height: 160px;}
- #SRLeft li { margin:0; padding:0; list-style:none; float:right;
- position:relative; padding:5px 5px 5px 5px; font-weight:bold;
- width:180px;}
- #SRLeft li a { text-align:center; display:block; width:180px; float:right;}
- #RoomType { width: 650px; float:left; height:700px;
- }
- #Room1 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF; }
- #Room2 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF;}
- #Room3 {float:left; width:630px; margin-bottom:10px; height:230px; border:2px solid #FFF;}
- .roompara{ width:380px;font-size:14px;}
- .imgdetails { width:240px; margin:2px 2px 2px 2px;}
- .roomdetails { width:380px; float:left;}
- .roomdetails h3 { font-weight:bold; text-align:center; width:380px; margin-top:5px;}
- .lblroom { margin-top:2px; padding:3px;}
- .cboroom { width:100px;}
- .rate { width:630px; margin-left:5px; float:left; height:50px;}
- .SRbtn { float:right; margin-bottom:10px;}
- .proom { font-weight:bold;}
- .lblrate { float:left; position:absolute; margin-left:100px;}
- /*----images in Rooms---*/
- .SRimg { border:4px solid #eee; margin:5px 5px 5px 5px; width:200px; float:left;
- height: 150px;
- }