Apply css after inserting javascript elements

Question

I have a div called "thumbs" and a javascript function populating it with images

function fillThumbs(){
    for (i=0; i<images.length; i++){
    var imageX = document.createElement("img");
    imageX.src = images[i];
    document.getElementById("thumbs").appendChild(imageX);
    }

}

then my css code

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10 10 0;
}

Problem: thumbs div is not centered, nor the #thumbs img are correctly spaced out. Looks like the margin property is ignored, while the width of the images is correctly passed.

You need to specifiy a unit for your margin in addition to the values. — connexo
– connexo, Commented Sep 3, 2015 at 9:43

T.J. Crowder · Accepted Answer · 2015-09-03 09:54:20Z

The margins aren't being applied because you don't have any units on them. You need px or similar (on the values that aren't 0; CSS is fine with 0s with no units):

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10px 10px 0;
/*          ^^   ^^     */
}

Live Example:

var i;
function fillThumbs(){
    for (i=0; i<5; i++){
    var imageX = document.createElement("img");
    imageX.src = "https://www.gravatar.com/avatar/e459e3d0f28452212c5958e54f658ef8?s=32&d=identicon&r=PG";
    document.getElementById("thumbs").appendChild(imageX);
    }

}
fillThumbs();

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10px 10px 0;
}

<div id="thumbs"></div>

Hint: To diagnose issues like this, right-click the element in your browser and choose "inspect element" (if you don't have that choice, use Chrome or Firefox). Use that, then look at the browser's dev tools to see why the CSS isn't being applied. Here's what Chrome's dev tools shows me:

and then if I hover the handy warning icon:

Patte · Accepted Answer · 2015-09-03 09:51:02Z

1

Your should always provide a unit as soon as the value is not equal to 0. Change your css like:

#thumbs img{
    width: 220px;
    margin: 0 10px 10px 0;
}

The margin: 0 auto; will only center the #thumbs node if it's width is known. Try giving it a width.

answered Sep 3, 2015 at 9:51

Patte

835 bronze badges

Collectives™ on Stack Overflow

Apply css after inserting javascript elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related