Why is my dynamic HTML seemingly randomly placed?

Question

I want my dynamically generated html to align, yet what I get is a little loosey-goosey:

enter image description here

Here's my jQuery:

function getNatlBookCritics() {
    var htmlBuilder = '';
    $.getJSON('Content/NBCCJr.json', function (data) {
        $.each(data, function (i, dataPoint) {
            if (IsYear(dataPoint.category)) {
                htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
            } else {
                htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
                    dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' +
                    dataPoint.imgsrc + '\"' +
                    dataPoint.imgalt + '></img></a>' +
                    '<div id=\"prizeCategory\" class=\"category\">' +
                    dataPoint.category +
                    '</div><br/><cite id=\"prizeTitle\" class=\"title\">' +
                    dataPoint.title +
                    '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                    dataPoint.author +
                    '</div><br/>';
                if (dataPoint.kindle.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
                }
                if (dataPoint.hardbound.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
                }
                if (dataPoint.paperback.length > 2) {
                    htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    ' target=\"_blank\">Paperback</a></button>';
                }
                htmlBuilder += '</section>';
            }
        }); //each
        $('#BooksContent').append(htmlBuilder);
        $('#BooksContent').css('background-color', 'black');
    });     //getJSONNBCCJr
}           // getNatlBookCritics()

...and here's the related CSS:

.yearBanner {
    font-size: 2em;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    float: left;
    padding-top: 100px;
}

.floatLeft {
    float: left;
    padding-right: 20px;
    padding-left: 5px;
}

section.wrapper {
    min-width: 360px;
    overflow: hidden;
    display: inline-block;
}

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}

.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    width: 160px;
}

.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

UPDATE

On a related note, is there any reason why I should change this code:

    }); //each
    $('#BooksContent').append(htmlBuilder);
    $('#BooksContent').css('background-color', 'black');
    $('button').button();
});     //getJSONNBCCJr

...to:

    }); //each
});     //getJSONNBCCJr
$('#BooksContent').append(htmlBuilder);
$('#BooksContent').css('background-color', 'black');
$('button').button();

UPDATE 2

Okay, here at long last is the illustrious but flawed HTML; I know it's not pretty, but there's also a jsfiddle here: http://jsfiddle.net/clayshannon/cMYEH/1/ I got it via console.log(htmlBuilder);

<div
   class="yearBanner">2012</div>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B00655KLOY.01.MZZZZZZZ.jpg"
      alt="Ben Fountain book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Fiction</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Billy
   Lynn's
   Long
   Halftime
   Walk</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Ben
      Fountain
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/B00655KLOY" rel="nofollow noreferrer"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0060885599" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0060885610" rel="nofollow noreferrer"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B007EDOLJ2.01.MZZZZZZZ.jpg"
      alt="Andrew Solomon book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">General
      Nonfiction
   </div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Far
   From
   the
   Tree:
   Parents,
   Children,
   and
   the
   Search
   for
   Identity</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Andrew
      Solomon
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/B007EDOLJ2" rel="nofollow noreferrer"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0743236718" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0743236726" rel="nofollow noreferrer"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B0062B0844.01.MZZZZZZZ.jpg"
      alt="Robert Caro book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Biography</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">The
   Passage
   of
   Power:
   The
   Years
   of
   Lyndon
   Johnson</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Robert
      Caro
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/B0062B0844" rel="nofollow noreferrer"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0679405070" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0375713255" rel="nofollow noreferrer"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B0072NWK88.01.MZZZZZZZ.jpg"
      alt="Leanne Shapton book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Autobiography</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Swimming
   Studies</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Leanne
      Shapton
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/B0072NWK88" rel="nofollow noreferrer"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0399158170" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/B008G16HVG.01.MZZZZZZZ.jpg"
      alt="Marina Warner book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Criticism</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Stranger
   Magic:
   Charmed
   States
   and
   the
   Arabian
   Nights</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">Marina
      Warner
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/B008G16HVG" rel="nofollow noreferrer"
      target="_blank">Kindle</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0674055306" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/0099437694" rel="nofollow noreferrer"
      target="_blank">Paperback</a>
   </button>
</section>
<section
   class="wrapper">
   <a
      id="mainImage"
      class="floatLeft"
      href="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
      target="_blank">
   <img
      height="160"
      width="107"
      src="http://images.amazon.com/images/P/1555976050.01.MZZZZZZZ.jpg"
      alt="D. A. Powell book cover"></img>
   </a>
   <div
      id="prizeCategory"
      class="category">Poetry</div>
   <br/>
   <cite
      id="prizeTitle"
      class="title">Useless
   Landscape,
   or
   A
   Guide
   for
   Boys</cite>
   <br/>
   <div
      id="prizeArtist"
      class="author">D.
      A.
      Powell
   </div>
   <br/>
   <button>
   <a
      href="https://rads.stackoverflow.com/amzn/click/com/1555976050" rel="nofollow noreferrer"
      target="_blank">Hardbound</a>
   </button>
</section>
<div
   class="yearBanner">2011</div>
<section
   class="wrapper">(etc.)</section>

And BTW, the "float-left" in the yearBanner does matter: I forgot to increment the version number of the CSS file, and so it wasn't showing me the dire consequences of leaving that out (I put it back).

Other key parts of my CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* This added 7/12/2013 to allow for jQueryUI buttons without them being oversized - 
    the fiddle for it: http://jsfiddle.net/RFUsW/1/ */
.ui-button-text-only .ui-button-text {
    padding: .2em .5em;
    line-height: 1.2;
    font-size: 0.8em;
}

I updated the fiddling: http://jsfiddle.net/clayshannon/cMYEH/1/

UPDATE 3

This (from http://addyosmani.com/blog/building-spas-jquerys-best-friends/) looks like an interesting alternative way to do it:

<ul id="albumList"></ul>

var albums = [
 { Title: "My Vacation In Malibu", AlbumYear: "1993" },
 { Title: "A Trip To The Sea-side", AlbumYear: "1992" }
 ];
 //define the markup for our template
 var template_markup = "
<ul>
<li><b>${Title}</b> (${AlbumYear})</li>
</ul>
";
 //compile our markup above as a template called
 //'albumTemplate'
 $.template( "albumTemplate", template_markup );
 //render the template using 'albums' as our data
 //source then insert the HTML thats rendered under
 //the albumList element
 $.tmpl( "albumTemplate", albums )
 .appendTo( "#albumList" );

...but https://github.com/BorisMoore/jquery-tmpl says it is "BETA. NO LONGER IN ACTIVE DEVELOPMENT OR MAINTENANCE. Issues remain open but are not being worked." which is a bit scary.

The other issue is: would I still be able to have my conditional logic, where if a certain value was such-and-such, create an element, otherwise do not.

The temptation to consider changing my code is partly driven by codemania (inveterate, indelible drive to tinker), but partly for a better reason, too: because this method may be more performant.

Might it have something to do with that 2012 in the upper left-hand corner? — Robert Harvey, Jul 17 '13 at 01:33
Can you serialize your page to static HTML (`document.outerHTML`?) and see if the problem exists there and then and upload it to jsfiddle? — Dai, Jul 17 '13 at 01:56
How exactly? I tried this: alert(document.outerhtml); and alert($(document).outerhtml); but neither worked. — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 02:22
Clay looks like your css is off. First off, not sure why you are floating the year banner left. I am guessing you want that to go across the full width with everything below it. Also, realize that if you have a float left on the image, when it goes past the image height the text is going to be all the way to the left like on the general notification image. I recommend copying the html that is created (in the picture you have above), putting that into jsfiddle along with the css, and then tweak the css until you have it how you want and try it again. — Matto, Jul 17 '13 at 02:29
You don't need to escape `"` if you are using `'` to delineate your strings. — Hogan, Jul 17 '13 at 02:50
@Matto: I commented out the float left for the year, and it looks precisely the same. I also tried getting the generated html via alert(), but that is read-only (trying to get something I can copy-and-paste into jsfiddle). — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 02:54
@ClayShannon - Just do a view source then you can see the html — Hogan, Jul 17 '13 at 03:00
@Hogan: No, View Source doesn't show the dynamically-generated HTML. — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 03:09
@ClayShannon - Then you are using the wrong browser, use Chrome. Chrome is the best browser (by far) for debugging web pages in any case so it should be in your tool kit if you want a easy time developing websites. — Hogan, Jul 17 '13 at 03:10
@Hogan: I am using Chrome; I'm not sure it's better than Firefox/Firebug for debugging, but I do use Chrome. — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 03:40
@Hogan: If you mean right-click on the page and select "View Page Source" - no, I can't. I searched for "2012" which is the first dynamically generated text, and it is not there. Silly me, though, all I need to do is put a breakpoint in the code and copy it from Visual Studio. — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 03:43
Guess not; I just tried breakpointing at the place where the html is appended to the content area, and it never stopped there...drats! — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 03:48
Okay, thanks; but won't be able to until later tonight (I'm at work, and this is my personal project). BTW, having been blocked from posting on SO until I'm back under the 50 posts in 30 days limit, I have posted some (unrelated to this) questions on the jQuery forum: https://forum.jquery.com/using-jquery-ui/ — B. Clay Shannon-B. Crow Raven, Jul 17 '13 at 21:37

Sean Kendle · Accepted Answer · 2014-05-28T17:32:28.123

First of all, I would clear the first book left. You can do that with

section.wrapper:first-child{
    clear: left;
}

Then, you should probably find out the heights of all elements that you're dynamically creating, and set all elements to the height of the largest element, otherwise things get messy. When one is too tall on the left, two elements will end up to the right of it, floating up against the side of the left element.

I wrote something to find the height of the largest element:

largest = 0;
$(".wrapper").each(function () {
    if ($(this).height() > largest) {
        largest = $(this).height();
    }
});

$(".wrapper").css("height", $largest);

Place that code right after this line: }); //getJSONNBCCJr

Finally, you should really be floating all your .wrapper sections to the left, and display: block

Thanks; I'll czech this out ASAP, but that may not be until Friday night. — B. Clay Shannon-B. Crow Raven, Jul 18 '13 at 14:22

score 3 · Answer 2 · answered Jul 20 '13 at 13:15

3

Make the following changes in css:

.ui-button-text-only .ui-button-text {
    padding: .2em .5em;
    line-height: 1.2;
    font-size: 0.8em;
    float: left;

}

.yearBanner {
    font-size: 2em;
    color: white;
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width:500px;
    padding-top: 50px;
    margin-left:50px;
    padding-bottom:20px;

}
Add the following css:

.wrapper{
    float: left;
    width: 500px;
    margin-left:20px;
    padding-bottom:20px;

}
Note: make sure that width of .yearBanner and .wrapper should be the same if you change the width of one class then you should change for other one also. set with as per your screen resolution because i have tested in jsfiddle that's why i have set it to 500px you may change it.

answered Jul 20 '13 at 13:15

Dhaval Bharadva

3,053
2
24
35

Great alterations/refinements, Dh...! If I can, I will split the bounty between you and SeanKendle. I originally intended it as an award for his existing answer, but this has helped me a lot, too! – B. Clay Shannon-B. Crow Raven Jul 20 '13 at 14:23
1

It didn't prompt me to split the bounty, so SeanKendle got it all! – B. Clay Shannon-B. Crow Raven Jul 20 '13 at 22:20
Thanks, Clay, did you use my code? Can we get a link to see the finished product? Good luck with the rest of your project! – Sean Kendle Jul 22 '13 at 19:26
Hey clay i thought i will get half of the bounty. – Dhaval Bharadva Jul 23 '13 at 05:56

Why is my dynamic HTML seemingly randomly placed?

UPDATE

UPDATE 2

UPDATE 3

2 Answers2

Linked