CODEWITHSUNDEEP
htmlcss
ahmed
ahmed

Reputation: 879

How to split a div into two columns as we split a table?

I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies

Upvotes: 7

Views: 66862

Answers (4)

user4864716
user4864716

Reputation:

This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.

I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).

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

This should address the question in most instances

    <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;
}

Upvotes: 0

Wayne McMichael
Wayne McMichael

Reputation: 17

Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.

Upvotes: -2

Omar Abid
Omar Abid

Reputation: 15966

Create two divs inside your main div

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

With CSS, fix each one to the correct side

#left { float:left }
#right { float:right }

Upvotes: 19

Franci Penov
Franci Penov

Reputation: 76021

It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.

  1. You can change the display CSS property on the divs. 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.
  2. You can make the divs float to the left in their container.
  3. You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
  4. You can switch to span.

Upvotes: 5

Related Questions