Geek Answers Handbook

How to split a div into two columns when splitting a table?

I really wanted the two grids to be in the same div, I mean one grid to the right, the other in the left ..... but now the grid appears down. Just as you split up in a table with two rows! same thing i need to split the div and add two grids side by side. I hope you understand my point. Thanking you in advance for your wonderful support and answers.

+7
html css
source share
4 answers

Create two divs inside the main div

<div id="main"> <div id="left"></div> <div id="right"></div> </div>

With CSS, correct each one to the right side

 #left { float:left } #right { float:right }
+16
source share

It all depends on the design you want to achieve for this table. There are several approaches, each of which gives slightly different results.

  • You can change the CSS display property in the div. The best value to use would be table-cell ; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
  • You can make divs float on the left in the container.
  • You can use absolute or relative positioning of the div in your container; however, this approach does not work well with fluid designs.
  • You can switch to span .
+5
source share

This is an extension of Omar Abid's accepted answer. I started from this and had to make additional changes, so it will work in my example of the stated question.

I did this work with class names instead of identifiers, so I could call the same CSS in multiple instances. This gave me the opportunity to simulate two cells of equal size. In my example, I set a fixed size using ems so that it can maintain its appearance in different size ranges of desktop and desktop browsers (in my mobile CSS I have a different strategy).

To align the image in the left div, I had to make a separate block (the last in CSS code).

In most cases, this should be a question.

  <div class="BrandContainer"> <div class="BrandContainerTitle"> <h1>...</h1> </div> <div class="BrandContainerImage"> <img alt="Demo image" src="..." /> </div> </div>

CSS:

  .BrandContainer { width: 22em; } .BrandContainerTitle { vertical-align: top; float: right; width: 10em; } .BrandContainerImage { vertical-align: top; float: left; } .BrandContainerImage img { width: 10em; }
0
source share

Use the table. It makes sense to use tables where they are more efficient. Such things are used for tables, and div is not for.

-one
source share

More articles:


All Articles