How I am supposed to align two treeview controls in the same line in asp.net webforms c#

Question

I want to align two separate treeview controls in one line. I am able to add only one treeview control each line. I've tried with panels also but no use. Pls help!

Answer 1

Ok, when I started out this stuff, I often used a table to place things on a web form. It was hard, and all I had was that table. So, I did often try to use a table "thing" to try and line up controls etc.

However, at the risk of sounding un-kind?

Adopt what what I call

Playing with blocks - (and yes, I do mean the ones children's play with!!!).

Once you start doing this, you never go back to tables for layouts. Now for sure, if you need some table data, then MOST certainly use a table (or more often gridview/listview).

But, I came from a long time desktop environment. And I found trying to put things on web pages REALLY difficult. I just kind of want to drag + drop things on a web page.

it was driving me to the silly farm.

That was until I discovered the playing with blocks approach!

So just think of each "thing" or controls or text boxes? Put them in a block. And that block is a div.

So, we have this for 5 blocks (5 divs)

So, I want to just drop cute square blocks on a page. Either they are placed one after another (appearing below each other),

But, lets say I want 3 blocks on one row, and two on the next?

Ok, well, what you do is NEAR always just place a block on the form - float it left.

then, if you want another block (same row), just put in another floating block.

Keep going until you think you have enough things on the page. Then, just start a WHOLE new row of fun blocks to pay with!

And to start a new row of blocks?

use a div with clear both.

So, now the above becomes this:

So, note how we just drop in block after block. Always just drop the block - floated to the left.
You drop more blocks - they are to be floated to the left.

Now, I wanted to space them out - used a margin.

So, we now have this:

Now if you want more things on that same row, just drop in more blocks floated left. When your happy, drop in the div clear both, and start over again.

So, now lets play with blocks for two tree views.

Put a div around them, and say we have two of them like this:

But, remember our fun with blocks!!

So, float the first block left.

Now float the next one.

So those blocks are just divs we play with.

So, now two treeviews are like this:

As a result of this fun with blocks approach? It has been a very long time since I used some table to try and get controls and things on the form lined up.

Now, lets say we wanted Hello world to the right of the 2 blocks. Well, create a div, and drop that in like this:

So, we just toss up block after block onto the screen. We just decide if we want this block on the same line/row, or not.

When I run this page, I get this now:

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer 2

Hi @Hemanth B ,
As far as I think,you could use Bootstrap Grid.It likes this:

<div class="container">  
  <div class="row">  
    <div class="col-sm">  
      One of three columns  
    </div>  
    <div class="col-sm">  
      One of three columns  
    </div>  
    <div class="col-sm">  
      One of three columns  
    </div>  
  </div>  
</div>  

More details,you could refer to below article:
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/layout/grid/
Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.