Should I use DIVS or the display: table?

Question

I have the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>

The outer DIV has a margin around it and inside that are two DIVs. I wanted to the two DIVs to be side by side but it seems that one is below the other.

How can I make them be side by side?

Another related question. For something like this would it be better to use display: table and then table-cell ?

To answer your second question: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Shomz, Jan 08 '13 at 02:18

score 1 · Answer 1 · answered Jan 08 '13 at 02:16

First of all, you don't need to specify display:block; for every div - that is the default.

What you need for your "making them side by side" is floats.

Here:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

Learn more about floats here: http://css-tricks.com/all-about-floats/

kirugan · Answer 2 · 2013-01-08T02:18:26.087

0

Try to add css display: inline-block property, like this:

#left-content, #right-content{
   display: inline-block;
}

Or use float property, with 'left' value for both divs, but i prefer inline-block way for this.

edited Jan 08 '13 at 02:18

answered Jan 08 '13 at 02:13

kirugan

2,514
2
22
41

score 0 · Answer 3 · answered Jan 08 '13 at 02:13

0

In the CSS add float:right on one and float:left on the other. If it still appears the same, increase the total width of the outer div.

answered Jan 08 '13 at 02:13

AmbuSreedharan

181
8

score 0 · Answer 4 · answered Jan 08 '13 at 02:13

0

The common way to do this is to use CSS float

http://css-tricks.com/all-about-floats

answered Jan 08 '13 at 02:13

Zombo

1
62
391
407

score 0 · Accepted Answer · answered Jan 08 '13 at 02:23

Using float for inner two div-boxes, for compatible for lower-version IE, the out box should also float, note the margin should be replace for padding. The display:block is redundant for box element like div.

   <style type="text/css">

       body, html{
       height: 100%;

}
        #outer {
            width: 90%;
            height: 90%;
            padding: 5% 5% 5% 5%;
            background-color: #333;
            float:left;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>

Should I use DIVS or the display: table?

5 Answers5