0

I am dynamically assembling divs within divs and adding text to each internal div - building a list with a Javascript list adapter. The internal list divs display as desired, but the respective text divs in each list div does not:

Example:

enter image description here

As you can see in the image the text div on the right in red text is slightly higher than the one on the left in green. I have set the properties for each as such:

In Javascript I add them in a loop using the following:

var divGreen = document.createElement("div");
divGreen.style.position = "relative";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "100%";
divGreen.style.marginLeft = "-40%";
divGreen.style.marginTop = "-20%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";                 
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);



var divRed = document.createElement("div");
divRed.style.position = "relative";
divRed.style.width = "10%";
divRed.style.left = "100%";
divRed.style.top = "100%";
divRed.style.marginLeft = "-20%";
divRed.style.marginTop = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";                   
divRed.innerHTML = 'Text';
div.appendChild(divRed);

Also, the literal Text is used to eliminate character size differences.

Why do they not line up vertically as expected? What am I missing?

Roy Hinkley
  • 10,111
  • 21
  • 80
  • 120
  • I deleted that comment. I relaized exactly what was worng. Sorry. – Brendan Oct 09 '14 at 18:28
  • Where do you define `div` and is that div appended to the body? – Brendan Oct 09 '14 at 18:32
  • `div` resides in a defined container that has an absolute position - this is displayed in the correct location and as desired. – Roy Hinkley Oct 09 '14 at 18:35
  • Alright one final thing. I am having trouble replicating your problem so that I can fix it. Perhaps you could do a jsfiddle? Because I have to remove the negative values in order to get it to display... – Brendan Oct 09 '14 at 18:40
  • Specifically everything else on that page that could have an impact on the positioning of said divs. – Brendan Oct 09 '14 at 18:46
  • Since I am defining them as `relative`, the only thing that should have an impact is the parent container - which is displaying correctly (as expected). I don't know how anything else could impact the divs in question in the way you suggest. – Roy Hinkley Oct 09 '14 at 18:56
  • What's really curious is the base metric of `top` and `marginTop` should be identical across all elements in the container. But, they don't appear to be!!! – Roy Hinkley Oct 09 '14 at 19:00
  • I think it may be because the webpage is, in effect, infinite and that you can't have 20% of infinity from the top if the end of the webpage is undefined. Try a specific unit like pixels? – Brendan Oct 09 '14 at 19:05
  • I am sorry but i prefer to see a fully working example because I use the DOM Inspector to see what attributes cancel out and what ones take effect on certain items on the webpage. – Brendan Oct 09 '14 at 19:09

2 Answers2

0

After reviewing this SO post - It's clear my understanding of absolute positioning was wrong. By setting the position absolute on the parent, I can use absolute positioning of it's children relative to the parent. The key is the parent having position set to absolute!

var divGreen = document.createElement("div");
divGreen.style.position = "absolute";
divGreen.style.width = "10%";
divGreen.style.left = "100%";
divGreen.style.top = "37px";
divGreen.style.marginLeft = "-40%";
divGreen.style.color = "green";
divGreen.style.textAlign="left";
divGreen.style.backgroundColor = "#cccccc";                 
divGreen.innerHTML = 'Text';
div.appendChild(divGreen);



var divRed = document.createElement("div");
divRed.style.position = "absolute";
divRed.style.width = "10%";
divRed.style.left = "100%";
divGreen.style.top = "37px";
divRed.style.marginLeft = "-20%";
divRed.style.color = "red";
divRed.style.textAlign="left";
divRed.style.backgroundColor = "#cccccc";                   
divRed.innerHTML = 'Text';
div.appendChild(divRed);

Now my links are aligned vertically as intended:

enter image description here

Community
  • 1
  • 1
Roy Hinkley
  • 10,111
  • 21
  • 80
  • 120
-1

I had this happen to me. I was able to put my code in a table.

<table>
     <tr>
          <td>
              html code here
          </td>
     </tr>
</table>

TR means table row and td is table data

Zoogy1983
  • 1
  • 3
  • I don't think that's what he is looking for. He is talking about nested `
    `'s not tables.
     – Brendan Oct 09 '14 at 18:34
  • You must be new to programming. – GeekByDesign Oct 09 '14 at 18:49
  • Just trying to help :( – Zoogy1983 Oct 09 '14 at 18:52
  • Thanks for the suggestion, but tables are too heavy handed for the situation. I really want to understand why the `divs` are not displaying as I expect? – Roy Hinkley Oct 09 '14 at 18:58
  • You gotta know what the person is asking to give them a helpful answer. You may mean well but if you aren't sure what's going on in the code it won't be very helpful. So next time if you dont really know what's going on, try answering questions you do. When you get yourself a reputation of 15 you can be more helpful by just voting up questions to make them more visible to the community. @Zoogy1983 – Brendan Oct 09 '14 at 18:59