0
188
ViewsRandom misplacement of a div
I'm making a website for myself and it has a projects page and I made a js script to auto add each of the projects using a json file. I have 4 projects in the json file so far but one of them is acting up. 
Circled in red is the div that is messed up. Here is the css for those divs:
#img {
vertical-align: top;
display: inline-block;
border-radius: 10px 10px 0px 0px;
width: 340px;
}
#title {
margin-top: 40px;
vertical-align: top;
font-weight: bold;
font-size: 30px;
float: left;
margin-left: 5px;
display: inline-block;
}
#desc {
float: left;
margin-left: 5px;
display: inline-block;
}
Now here is the js script that is adding them:
$.getJSON('https://raw.githubusercontent.com/Pinball3D/andysthings/main/registy.json',
function(data){
console.log(data);
var i = 0;
console.log(data.length, i < data.length)
while (i < data.length) {
dat = data[i];
var a = document.createElement("a");
a.href=dat.url;
var li = document.createElement("li");
li.id="item";
var img = document.createElement("img");
img.src=dat.img;
img.id="img";
li.appendChild(img);
var title = document.createElement("div");
title.id="title";
title.textContent=dat.name;
li.appendChild(title);
var desc = document.createElement("div");
desc.id="desc";
desc.textContent=dat.desc;
li.appendChild(desc);
a.appendChild(li);
document.querySelector("#grid").appendChild(a);
i++;
}
});
I don't know what is causing that element to be out of place.
1 answers
Answer question0
The reason for that is float: left; and display: inline-block; on the title and description.
The purpose of float is to make text float around an element if there is enough space (like an image or drop caps)
Based on the image it is not clear why you use display: inline-block; and float at all. As it seems that the description should always be below the title.
So remove float: left and change inline-block to block for both title and description.
Nowadays float should only be used if you really need to let float text around and element and not for other layout purposes. For layouts where float was used you should use flex or grid instead.
Additional having a as a child of ul is not valid. And a li as a child of a isn't either.
$.getJSON('https://raw.githubusercontent.com/Pinball3D/andysthings/main/registy.json',
function(data) {
//console.log(data);
var i = 0;
//console.log(data.length, i < data.length)
while (i < data.length) {
dat = data[i];
var li = document.createElement("li");
li.id = "item";
var a = document.createElement("a");
a.href = dat.url;
var img = document.createElement("img");
img.src = dat.img;
img.id = "img";
a.appendChild(img);
var title = document.createElement("div");
title.id = "title";
title.textContent = dat.name;
a.appendChild(title);
var desc = document.createElement("div");
desc.id = "desc";
desc.textContent = dat.desc;
a.appendChild(desc);
li.appendChild(a);
document.querySelector("#grid").appendChild(li);
i++;
}
});body {
font-family: sans-serif;
}
#img {
vertical-align: top;
display: inline-block;
border-radius: 10px 10px 0px 0px;
width: 340px;
}
#title {
margin-top: 40px;
font-weight: bold;
font-size: 30px;
margin-left: 5px;
}
#desc {
margin-left: 5px;
}
#grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#grid li {
display: inline-block;
border-radius: 5px;
background-color: rgb(200,200,200);
max-width: 340px;
color: white;
}
#grid li a {
display: block;
color: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="grid">
</ul>