Alingment in HTML

Question

I have this example code:

<div style= "border : solid 2px #bebdbf;
  margin: auto;
  margin-top: 400px;
  background : #ffffff;
  color : #000000;
  padding : 4px;
  width : 200px;
  height : 250px;
  overflow : auto;">

  <?php
     foreach ($prueba as $pruebas) {
     print_r("$pruebas <br>");
  }?>
</div>


<div style= "border : solid 2px #bebdbf;
 background : #ffffff;
 margin: auto;
 color : #000000;
 padding : 4px;
 width : 200px;
 height : 250px;
 overflow : auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
</div>

and I got this:

What I want is that the two divs being next to each other and not one in the top of other.

If you need to support old browsers, `float`. If you don't, look into flexbox. — ceejayoz, Jun 01 '19 at 00:42
@ceejayoz `display: inline-block;` is supported by every browser, even IE 6. — Jacob Gunther, Jun 01 '19 at 03:46

score 2 · Accepted Answer · answered Jun 01 '19 at 03:43

Try adding display: inline-block; to the style attribute of both divs as I have done below.

<div style= "border : solid 2px #bebdbf;
  margin: auto;
  margin-top: 400px;
  background : #ffffff;
  color : #000000;
  padding : 4px;
  width : 200px;
  height : 250px;
  overflow : auto;
  display: inline-block;">

  <?php
     foreach ($prueba as $pruebas) {
     print_r("$pruebas <br>");
  }?>
</div>


<div style= "border : solid 2px #bebdbf;
 background : #ffffff;
 margin: auto;
 color : #000000;
 padding : 4px;
 width : 200px;
 height : 250px;
 overflow : auto;
 display: inline-block;">
    1<br />
    2<br />
    3<br />
    4<br />
    5<br />
    6<br />
    7<br />
    8<br />
    9<br />
    10<br />
</div>

Alingment in HTML

1 Answers1