How do you do side-by-side divs in Javascript?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Cruzan
    New Member
    • Dec 2010
    • 7
    #1

    How do you do side-by-side divs in Javascript?

    I would like a Javascript only solution.

    This HTML only version does what I want:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html><body>
<div style="width: 1200px; height: 1000px;">
  <div style="width: 50%; height: 80%; float: left;">
    This is the left side.
  </div>
  <div style="width: 49%; height: 80%; float: right;">
    This is the right side.
  </div>
</div>
</body></html>

    But seemingly doing the same thing here in Javascript puts one div on top of another, rather than side-by-side.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<script type="text/javascript">
function main()
{
  var bodyObj, divMain, divLeft, divRight;
  bodyObj = document.getElementsByTagName("body")[0];

  divMain = document.createElement("div");
  divMain.style.width = "1200px";
  divMain.style.height = "1000px";
  bodyObj.appendChild(divMain);

  divLeft = document.createElement("div");
  divLeft.style.width = "50%";
  divLeft.style.height = "80%";
  divLeft.style.float = "left";
  divLeft.innerHTML = "This is the left side.";
  divMain.appendChild(divLeft);

  divRight = document.createElement("div");
  divRight.style.width = "49%";
  divRight.style.height = "80%";
  divRight.style.float = "right";
  divRight.innerHTML = "This is the right side.";
  divMain.appendChild(divRight);
}
</script>

<body onload="main()">
</body></html>
    What is missing, or what am I doing wrong, in the Javascript version? Thanks.
    Tags: div, javascript, side-by-side
    • johny10151981
      Top Contributor
      • Jan 2010
      • 1059
      #2
      i can tell you about html

      Code:
      <TABLE cellpadding=0 cellsapce=0 border=0>
 <TR>
  <TD><DIV>Hello :) </DIV></TD>
  <TD><DIV>Hello :) </DIV></TD>
 </TR>
</TABLE>

        Comment

        • Cruzan
          New Member
          • Dec 2010
          • 7
          #3
          Thanks, I've also done that (divs in a table) in Javascript just in case I can't figure this one out, but I would like to avoid any more nesting than necessary...

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              The problem is where you try to set the float. float is a reserved word, so to set the CSS float:
              Code:
              div.style.cssFloat = "left";
              This may not work in IE which requires styleFloat.

                Comment

                • Cruzan
                  New Member
                  • Dec 2010
                  • 7
                  #5
                  Thanks, much! cssFloat/styleFloat do the trick. My only somewhat niggling question at this point is why

                  divLeft.setAttr ibute("style"," float: left");
                  divRight.setAtt ribute("style", "float: right");

                  won't also work exactly the same. They do put divs side-by-side but the right div is now right aligned way off at the right edge of my screen instead of left aligned in the div box like before.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      That's probably because you're overwriting the previous style rules.

                        Comment

                        • Cruzan
                          New Member
                          • Dec 2010
                          • 7
                          #7
                          Thanks again! I'm seeing what you're saying.

                          This does what I expect:
                          Code:
                          divLeft = document.createElement("div");
divLeft.setAttribute("style","float: left");
divLeft.style.width = "50%";
divLeft.style.height = "80%";
divLeft.innerHTML = "This is the left side.";
divMain.appendChild(divLeft);
                          But this doesn't:
                          Code:
                          divLeft = document.createElement("div");
divLeft.style.width = "50%";
divLeft.style.height = "80%";
divLeft.setAttribute("style","float: left");
divLeft.innerHTML = "This is the left side.";
divMain.appendChild(divLeft);
                          With the setAttribute in the second set of code effectively overwriting, as you said, the previous two style rules. This I didn't expect at all (and also seems to shed some light on problems I've had before with styling tables). This overwriting also seems to occur in both FF 3.6 and IE8 (the browsers I test with) suggesting it's more a "feature" than a bug. I've done a little Googling and haven't turned up much on this. Could you explain more what is going on here and the rationale for it. Thanks!

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              That's easy enough to explain. When you set the style:
                              Code:
                              div.setAttribute("style"...
                              it's similar to:
                              Code:
                              <div style="">
                              whereas when you set just one property:
                              Code:
                              div.style.width="50%";
                              you're just overwriting or setting that property, not the whole style rule, so, for example:
                              Code:
                              <div style="width:40%;height:80%;float:left;">
                              becomes
                              Code:
                              <div style="width:50%;height:80%;float:left;">

                                Comment

                                • Cruzan
                                  New Member
                                  • Dec 2010
                                  • 7
                                  #9
                                  Your answers have been very illuminating. Thanks so much!

                                    Comment

                                    Previous template Next
                                    Working...