CODEWITHSUNDEEP
c#asp.netcontrols
onik
onik

Reputation: 1631

put asp.net controls in different places on the page

I want to put controls on the page where I want for example grid view on the left side and pairs of text boxes and labels on the right side. how could i do that? because when i try to drag and drop it just puts text boxes and labels under the grid view or up the view (it sticks to the grid view)

Upvotes: 1

Views: 2528

Answers (1)

R.C
R.C

Reputation: 10565

You can control the Layout of your page :

1.) Using CSS. by use of <div>, <span> tags etc

2.) Using Tables

Using tables for page layout is actually debatable and many recommend not to use it. Anyhow thats totally a different question. Still check this: Why is using tables for website layout such an evil

Using CSS:

Page Markup:

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-left"></div>
        <div id="content-main"></div>
        <div id="content-right"></div>
    </div>
    <div id="footer"></div>
    <div id="bottom"></div>
</div>

CSS:

#wrapper {
        width:900px;
        margin:0px auto;
        border:1px solid #bbb;
        padding:10px;
    }
#header {
        border:1px solid #bbb;
        height:80px;
        padding:10px;
    }
    #content {
        margin-top:10px;
        padding-bottom:10px;
    }
    #content div {
        padding:10px;
        border:1px solid #bbb;
        float:left;
    }
    #content-left {
        width:180px;
    }
    #content-main {
        margin-left:10px;
        width:500px;
    }
    #content-right {
        margin-left:10px;
        width:134px;
    }
    #footer {
        float:left;
        margin-top:10px;
        margin-bottom:10px;
        padding:10px;
        border:1px solid #bbb;
        width:878px;
    }
    #bottom {
        clear:both;
        text-align:right;
    }

*Output:*

enter image description here

Using tables:

 <table width="500" border="0">
    <tr>
       <td colspan="2" style="background-color:#FFA500;">
          <h1>Main Title of Web Page</h1>
       </td>
   </tr>    
   <tr>
       <td style="background-color:#FFD700;width:100px;">
          <b>Menu</b><br>
             HTML<br>
             CSS<br>
            JavaScript
      </td>
      <td style="background-color:#eeeeee;height:200px;width:400px;">
          Content goes here</td>
   </tr>    
   <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            Copyright Note</td>
   </tr>
</table>

Output:

enter image description here

Refer below links for more examples:

Upvotes: 2

Related Questions