pb4759jh68 pb4759jh68 - 3 months ago 9
CSS Question

JavaScript changes up my CSS

I have some div boxes in my html and they are formatted the way I want.

Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.

Why is that? And how do I prevent it from doing that?

Here is my HTML:

<div id="board">
<div class="row" id="top">
<div class="box" id="0"> </div>
<div class="box" id="1"> </div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"> </div>
<div class="box" id="3"> </div>
</div>
</div>


Here is my CSS:

body {
background-color:red;
width:1000px;
margin:10px;
}

#top {
display:block;
width:200px;
height:100px;
}

#bottom {
display:block;
width:200px;
height:100px;
}

.box {
height:94px;
width:96px;
border:1px solid white;
display:inline-block;
}


Here is my JavaScript:

document.getElementById("0").innerHTML = 20;


Here is my JSFiddle:

https://jsfiddle.net/pb4759jh68/arbsws5u/

In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.

Thanks!!!

Answer

It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:

vertical-align:top; 

to the box class.