Home/ Questions/Q 6808083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:54:42+00:00

How do I put the two divs side by side? What if I have

  • 0

How do I put the two divs side by side? What if I have more than 2 divs and I want to put them all side by side? I found that if they are canvas, they are automatically placed side by side. This is not true for divs.

In additional, how come the button’s value doesn’t change the text on the button? I was expecting “Commit” to show up but it didn’t.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
  function draw () {

    var displayHeight = 200;
    var displayWidth = 100;
    var container = document.getElementById("container");

    var Div = {
        elemOne  : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
        elemTwo  : CreateRectDivElement (displayWidth/2,displayHeight/10*8),
        buttonCommit: CreateButtonElement (displayWidth,displayHeight/10*2)
    };

     Div.buttonCommit.type="button";
     Div.buttonCommit.value="Commit";
     Div.elemOne.style.border = '1px solid black';
     Div.elemTwo.style.border = '1px solid black';

    container.appendChild (Div.buttonCommit);
    container.appendChild (document.createElement("br"));
    container.appendChild (Div.elemOne);
    container.appendChild (Div.elemTwo);


  }

  function CreateRectCanvasElement(width, height)
  {
    var canvas = document.createElement('canvas');
    canvas.style.position = 'relative';
    canvas.style.border = '1px solid black';

    canvas.style.width = width + 'px';
    canvas.style.height= height + 'px';


    return canvas;
  }

  function CreateButtonElement(width, height)
  {
    var element = document.createElement('button');
    element.style.width = width + 'px';
    element.style.height = height + 'px';

    return element;
  }

  function CreateDivElement()
  {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    return div;
  }

  function CreateRectDivElement (width, height)
  {
    var div = document.createElement('div');
    div.style.width = width + 'px';
    div.style.height= height + 'px';

    return div;
  }
</script>
</head>

<body onload="draw()">
<div id="container"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    DIV issue

    Use display: inline-block; or float: left; in the style.

     Div.elemOne.style.display = 'inline-block';
 Div.elemTwo.style.display = 'inline-block';

    Button issue

    The value is not in every browser the caption of the button. Use the inner html/text for the caption, just like you do for links <a href="...">Link text</a>.

    <button value="Commit"></button>
<br />
<button>Commit</button>

    Button Sample
    http://jsfiddle.net/t9etS/

    Fixed sample from the comments
    http://jsfiddle.net/APqgz/2/

    • 0