CODEWITHSUNDEEP
javascripthtmlcss
matonator
matonator

Reputation: 45

Appending more elements to one div horizontally

I want to create page, which will show bars/restaurants on page based on some filter. I have one div, which will contain all results (.resultsContainer). I have no problem appending more divs (.barContainer) to this one, but I am struggling to actually append information to these divs. I want .barContainer (.infoContainer) to hold more information such as picture, name, address etc. Problem is when I use append to it, divs are stacked vertically, because margins take full width, even when I set them to zero. I tried using createDocumentFragment() function, where I stack more childs, and then I append result to the .barContainer, which I pass then to HTML, but still it is not working how it should. Basically what I try to achieve is to stack information to infoContainer like tetris bricks. I appreciate any help, maybe there is way how to create html template and use it dynamically? I am pretty sure I am doing something wrong with appendChild, but I cant find a solution. I am new to webcoding.)

Here in my code I will try to put picture, adress and name into the infoContainer, each of those should take one third of the parent div's width and they should be next to each other without any margin. They will have different colours.

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;
}

Upvotes: 2

Views: 1775

Answers (3)

leveeee
leveeee

Reputation: 70

If I understand your question correctly, you just need to add this to your CSS

/* CLASSES YOU WANT TO INCLUDE */
.barPicture,
.barName,
.barAddress{
    display: inline-block;
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

Simply make your elements inline-block, as by default div is a block element and whatever the width you specify it will always occupy the whole row.

You can read more about block/inline elements

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);

}
#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;
    display:inline-block
}

.barName{
    background-color: blue;
    margin: 0px;
    width: 200px;
    height: 180px;
    display:inline-block
}

.barAddress{
    background-color: green;
    margin: 0px;
    width: 200px;
    height: 180px;
    display:inline-block
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>     
    <div id="resultsContainer"></div>

Upvotes: 1

Itay Ganor
Itay Ganor

Reputation: 4205

Your best solution is to apply display: flex to .infoContainer. That will force the divs to be arranged in a row. You can also apply display: inline-block; for .barPicture and .barName, but it may look bad if you have an overflow.

Demo with .infoContainer {display: flex;}:

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.createTextNode("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);

}
#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;
    display: flex;
}

.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;
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>     
    <div id="resultsContainer"></div>

Upvotes: 0

Related Questions