Link to home
Start Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

asked on

Web page design problem

Hi Experts,

I want to place a calender control and a data repeater side by side in a web page. Both should same size and in half of the screen I want calender control and in the other half I want the data of repeater control. I tried in so many ways but can not fix this problem. I have attached the views of different browers. This is my code.

 <div class="InputDiv50percent" >
                <asp:Calendar ID="mnuCalender" runat="server" BackColor="White" BorderColor="#999999" Font-Names="Verdana" Font-Size="13pt" ForeColor="Black" Height="600px" Width="650px" CellPadding="4" DayNameFormat="Shortest" >
                <DayHeaderStyle Font-Bold="True" Font-Size="13pt" BackColor="#CCCCCC" />
                <NextPrevStyle VerticalAlign="Bottom" />
                <OtherMonthDayStyle ForeColor="#808080" />
                <SelectedDayStyle BackColor="#666666" ForeColor="White" Font-Bold="True" />
                <SelectorStyle BackColor="#CCCCCC" />
                <TitleStyle BackColor="#B9DEAA" Font-Bold="True" BorderColor="Black" />
                <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                <WeekendDayStyle BackColor="#FFFFCC" />
                </asp:Calendar>
            </div>



            <div id="DivMenu"  runat="server" class="InputDiv50percent">
              <table class="menutables">
                    <asp:Repeater ID="outerRepeater" runat="server"  EnableViewState="true">
                    <ItemTemplate>
                         <tr>
                            <td style ="color:black;background :rgb(205, 218, 177)">
                                <asp:Label ID="lblMealTimeID" runat="server" Text='<%#Eval("MealTimeID")%>' Visible="false" ></asp:Label>
                                <asp:Label ID="lblMealTime" runat="server" Text='<%#Eval("MealTimeName")%>'></asp:Label>
                            </td>
                         </tr>
                       
                   
                        <asp:Repeater ID="innerRepeater" runat="server"  EnableViewState="true" >
                            <ItemTemplate>
                                <tr>
                                    <td style="padding-left :50px;">
                                        <asp:Label ID="lblMenuItem" runat="server" Text='<%#Eval("MenuItem")%>'></asp:Label>
                                        <asp:Label ID="lblMenuItemID" runat="server" Text='<%#Eval("MenuItemID")%>' Visible="false"></asp:Label>
                                    </td>
                                 </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                                                                                                                                     
                    </ItemTemplate>
                  </asp:Repeater>
              </table>
            </div>


Css
------

     .InputDiv50Percent
            {
                float :left ;
                width:50%;
                margin-left :10px;
            }

Any help is greatly appreciated.

Thanks in advance.
IEView.png
GoogleChromeView.png
SmallScreenView.png
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I would recommend using Twitter Bootstrap framework, It will save a lot of time for you because it comes with a lot of predefined classes.

http://getbootstrap.com/
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

ASKER

Excellent!! It worked. Thank you so much for your help.