How can I push the first row of images down?

Question

Thanks to SeanKendle over at Why is my dynamic HTML seemingly randomly placed?, I've made progress on the appearance of my site, but as you can see:

enter image description here

...it still needs some work, specifically that the first row needs to start below the tabs. How can I accomplish that? It doesn't seem like adding padding to the tab widget would help, as it is already being encroached on by the dynamically generated html, so I'm at a loss as to how to "push down" that first row.

The fundamental html, css, and jQuery can be seen here: http://jsfiddle.net/clayshannon/cMYEH/6/

...and the html generating code is like this:

$.getJSON('Content/NBCCJr.json', function (data) {
    // I tried renaming the above to nbcc.json, but it won't work with that name...?!? $.getJSON('Content/nbcc.json', function (data) {
    $.each(data, function (i, dataPoint) {
        if (IsYear(dataPoint.category)) {
            htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
        } else { // see snippet at top of unit for dealing with landscape-oriented books (such as some children's books) to change height and width of img
            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\" >' +
                dataPoint.title +
                '</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
                dataPoint.author +
                '</div><br/>';
            if (dataPoint.kindle.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' +
                    ' target=\"_blank\">Kindle</a></button>';
            }
            if (dataPoint.hardbound.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' +
                    ' target=\"_blank\">Hardbound</a></button>';
            }
            if (dataPoint.paperback.trim().length > 2) {
                htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' +
                    //'class=\"float-right\" target=\"_blank\">Paperback</a></button>';
                    ' target=\"_blank\">Paperback</a></button>';
            }
            htmlBuilder += '</section>';
        }
    }); //each
    $('#BooksContent').append(htmlBuilder);

I added this to section.wrapper in the CSS:

padding-top:25px;

...but I still have, as you can see, that encroachment upwards of the first row of dynamic html. Do I need to add something to the CSS regarding the tab widget, or alter the generation of html, or...???

Perfect - make it an answer, and I will mark it as such. – B. Clay Shannon-B. Crow Raven Jul 20 '13 at 03:32 — B. Clay Shannon-B. Crow Raven, Jul 20 '13 at 03:32

score 1 · Accepted Answer · answered Jul 20 '13 at 03:34

1

Instead of padding-top try margin-top and see if it's any different. Padding would just expand the background since it's padded inside, the margin should lower the entire thing.

answered Jul 20 '13 at 03:34

score 1 · Answer 2 · answered Jul 20 '13 at 03:41

For me, the fiddle looks good. Did u make any changes, and if u want the books to start from next row after the year, than just remove the float:left property of '.yearBanner'

Apart from that i don't see any wrong alignments there. If u have a different version as your screenshot try setting the position:relative, and then use the top:25px property.

Can you brief your problem more clearly and give us a fiddle to show your exact problem. If i am missing something, excuse me.

How can I push the first row of images down?

2 Answers2