How to split a div ?

Question

Hello, how do I split a div into two rows so I can add two grids !!!! The grid which I'm using is of TMS .

Answer 1

Add two child<div> elements to the <div> you want to split?

Answer 2

The question isn't amazingly clear, but if I'm reading you right, the easiest way is to put two divs inside your div. So instead of:

<div><!-- grid stuff here --></div>

you'd do:

<div>
    <div><!-- stuff for first gird here --></div>
    <div><!-- stuff for second gird here --></div>
</div>

Answer 3

divs don't really work like that (splitting into rows and columns). if you have a div, just put both grids inside.

 <div>
      <control1/>
      <control2/>
 </div>

if you need to add a line break in between, either set control2's style to something that will break ("float:left;clear:left") or add a
in between.

Edit

In response to your comment to another answer

OK , I actually wanted the two grids in one div , I mean one grid in right, other in the left

I suspect you mean you want 2 columns, not 2 rows.

  |<--  column -->|<-- column -->|
  +---------------+--------------+ 
  |               |              |  ^
  |               |              | row
  |               |              |  v
  +---------------+--------------+

In this case, there's a couple ways you can handle alignment. one way is to float the two controls --

<div>
    <control1 style='float:left' />
    <control2 style='float:left' />
</div>

you could also use inline-block, with possibly better results, but it would take a bit of fiddling. see this link for a treatise on aligning elements with inline-block

Answer 4

I was looking for the same thing... But how to add uneven divs as columns and rows as well and set their widths and heights? I am trying to create a very uneven structure, which would be as easy as a snap with tables. With divs, a bit alien to me!