CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sadiq
Sadiq

Reputation: 838

Dynamically create divs Side by Side

I have seen so many posts pertaining the titled issue, but non of them worked in my case. I want 3 divs to appear in each row but the following code gets each div casted on new line vertically:

JQuery

            $(document).ready(function() {
            $.ajax({
                url: "Image/",
                success: function(data) {
                    var el = $('<div></div>');
                    el.html(data);
                    var imgArr = $('a', el);
                    var images = [];

                    $.each(imgArr, function(i, val) {
                        images[i] = val.href.replace(window.location.host, "").replace("http:///", "");
                        if ($.inArray(images[i].split('.').pop(), ["gif", "png", "jpeg"]) != -1)

                       $('#Panel1').append('<div id="divId"' + i + ' style="height:80px;width:80px;float:left;background-image:url(\'Image/' + images[i] + '\');"></div>');
                    });
                }
            });
        }
        );

HTML

<body>
        <asp:Panel ID="Panel1" runat="server" CssClass="centeredPanel">
        </asp:Panel> 
</body>

CSS

        .centeredPanel
    {
        width:25%;
        height:50%;
        position:absolute;
        left:37.5%;
        top:25%;
    }​

imgArr is an array containing images which are retrieved from the folder.

What am I missing?

Upvotes: 0

Views: 2657

Answers (4)

Sadiq
Sadiq

Reputation: 838

Heck! Actually the problem is with using 'panel' element. As soon as I changed it by 'div' element it fixed my problem.

$('#Pardiv').append($("<img style='height:80px;width:80px;float:left;padding:30px;' src= Image/" + images[i] + " />"));

where Pardiv is the div containing all the images

Upvotes: 0

kheya
kheya

Reputation: 7612

If you want the divs to be in one line then either use display:inline-block OR float:left;

If you want the divs on different lines, then use display:block;

Demo here (css is inline and you should tweak and put in css classes)

[http://jsfiddle.net/ke4nhpkm/1/]

Upvotes: 0

Rahul
Rahul

Reputation: 5834

In Your CSS add 

#divId
{
 float:left;
}

Upvotes: 0

hallole
hallole

Reputation: 171

I think your problem is the fact, that divs are by default of the css-display: block, which means, that after each div, there'll start a new line. So I would try to add this to your css:

div {
display: inline-block;
}

Hope this helps you!

Upvotes: 1

Related Questions