I am currently working on a project where I need to display bars and restaurants based on specific filter criteria. I have a container div called .resultsContainer where all the results will be displayed. While I can easily append more divs (.barContainer) to this container, I am facing challenges when it comes to appending information to these divs. My goal is to have each .barContainer (.infoContainer) hold details such as pictures, names, and addresses horizontally without any margins in between them. However, no matter how hard I try, the divs are stacked vertically due to the full width taken up by margins even when set to zero. I attempted to use createDocumentFragment() function to stack child elements together before appending them to .barContainer, but the layout still isn't as desired. I believe there might be a way to dynamically create an HTML template for displaying the information, but being new to web coding, I'm struggling to find the right solution. In my code, I intend to include picture, address, and name in the infoContainer wherein each of them should occupy one third of the parent div's width and be displayed next to each other seamlessly without any spacing. Moreover, they should have different background colors for distinction.
HTML:
<body>
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
</body>
JS:
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createElement("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
CSS:
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
}