Arrange pictures and div elements in a horizontal layout

I am facing an issue with my code that is displaying 5 'cards' in a messed up layout instead of a straight line. I have tried to align them vertically, but some are still higher and not in the right positions. For reference, I want the layout to look similar to this https://i.stack.imgur.com/DlSBP.png

HTML

        <main>
            <center>
                <button class="open"  id="conferm" onclick="opencards()">Open Cards.</button>
                <br />
                <img class="card" src="images/blank.png" id="canvas" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s1"></span></div>
                    <div class="stats">Health: <span id="s2"></span></div>
                    <div class="stats">Worth: <span id="s3"></span></div>
                    <div class="stats">Intelligence: <span id="s4"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas1" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s5"></span></div>
                    <div class="stats">Health: <span id="s6"></span></div>
                    <div class="stats">Worth: <span id="s7"></span></div>
                    <div class="stats">Intelligence: <span id="s8"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas2" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s9"></span></div>
                    <div class="stats">Health: <span id="s10"></span></div>
                    <div class="stats">Worth: <span id="s11"></span></div>
                    <div class="stats">Intelligence: <span id="s12"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas3" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s13"></span></div>
                    <div class="stats">Health: <span id="s14"></span></div>
                    <div class="stats">Worth: <span id="s15"></span></div>
                    <div class="stats">Intelligence: <span id="s16"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas4" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s17"></span></div>
                    <div class="stats">Health: <span id="s18"></span></div>
                    <div class="stats">Worth: <span id="s19"></span></div>
                    <div class="stats">Intelligence: <span id="s20"></span></div>
                </div>
            </center>
        </main>

JAVASCRIPT

var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");

function opencards(){
    var pc = document.getElementById("packprice").innerHTML;
    var cc = document.getElementById("cash").innerHTML;
    var cash = Number(cc) + 50;
    var cardnum = Math.floor(Math.random() * cards.length);
    var s1 = Math.floor(Math.random() * 100);
    var s2 = Math.floor(Math.random() * 100);
    var s3 = Math.floor(Math.random() * 100);
    var s4 = Math.floor(Math.random() * 100);
    var s5 = Math.floor(Math.random() * 100);
    var s6 = Math.floor(Math.random() * 100);
    var s7 = Math.floor(Math.random() * 100);
    var s8 = Math.floor(Math.random() * 100);
    var s9 = Math.floor(Math.random() * 100);
    var s10 = Math.floor(Math.random() * 100);
    var s11 = Math.floor(Math.random() * 100);
    var s12 = Math.floor(Math.random() * 100);
    var s13 = Math.floor(Math.random() * 100);
    var s14 = Math.floor(Math.random() * 100);
    var s15 = Math.floor(Math.random() * 100);
    var s16 = Math.floor(Math.random() * 100);
    var s17 = Math.floor(Math.random() * 100);
    var s18 = Math.floor(Math.random() * 100);
    var s19 = Math.floor(Math.random() * 100);
    var s20 = Math.floor(Math.random() * 100);
    document.getElementById("canvas").src = cards[cardnum];
    document.getElementById("s1").innerHTML = s1;
    document.getElementById("s2").innerHTML = s2;
    document.getElementById("s3").innerHTML = s3;
    document.getElementById("s4").innerHTML = s4;
    document.getElementById("canvas1").src = cards[cardnum];
    document.getElementById("s5").innerHTML = s5;
    document.getElementById("s6").innerHTML = s6;
    document.getElementById("s7").innerHTML = s7;
    document.getElementById("s8").innerHTML = s8;
    document.getElementById("canvas2").src = cards[cardnum];
    document.getElementById("s9").innerHTML = s9;
    document.getElementById("s10").innerHTML = s10;
    document.getElementById("s11").innerHTML = s11;
    document.getElementById("s12").innerHTML = s12;
    document.getElementById("canvas3").src = cards[cardnum];
    document.getElementById("s13").innerHTML = s13;
    document.getElementById("s14").innerHTML = s14;
    document.getElementById("s15").innerHTML = s15;
    document.getElementById("s16").innerHTML = s16;
    document.getElementById("canvas4").src = cards[cardnum];
    document.getElementById("s17").innerHTML = s17;
    document.getElementById("s18").innerHTML = s18;
    document.getElementById("s19").innerHTML = s19;
    document.getElementById("s20").innerHTML = s20;
    document.getElementById("cash").innerHTML = cash;
};

CSS

.card{
    margin-top: 50px;
    height: 300px;
    width: 200px;
    float: left;
}
.stats{
    vertical-align: middle;
}
.attatch{
    float: left;
    width: 200px;
    height: 72px;
    border: 2px solid black;
}
javascripthtmlcssimage

Answer №1

Start by grouping cards and their attachments together instead of aligning them separately.

 <div class =card-group>
     <img class="card" src="images/blank.png" id="canvas" />
        <div class="attatch">
           <div class="stats">Damage: <span id="s1"></span></div>
           <div class="stats">Health: <span id="s2"></span></div>
           <div class="stats">Worth: <span id="s3"></span></div>
           <div class="stats">Intelligence: <span id="s4"></span</div>
        </div>
 </div>

Then, adjust the alignment of those groups with the following CSS:

.card-group {
  float: left;
  margin: 10px;
}

Remember to remove any previous alignments from your code like so:

.card{
    margin-top: 50px; // remove
    float: left;      // remove
}

.attatch{
    float: left;      // remove
}

For a live example, check out this demo link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the browser is not in the foreground, clicking on the Bootstrap datepicker with Selenium does not register

When you click on the input field <input id="dp1" class="span2" type="text" value="02-16-2012"> If the browser is in the background, the datepicker popup will not display. Even using javascript or jquery to click the input field does not show the ...

javascriptjqueryseleniumselenium-webdriver

Several conditional statements in JSX

In my JSX Return() code, I am encountering an "If" issue when one of my conditions has 2 different 'onClick' events. There are 2 'a' tags, where one will display button 'X' if a statement is true and the other will display but ...

javascripthtmlreactjsif-statementjsx

Loading a Vue.js template dynamically post fetching data from Firebase storage

Currently, I am facing an issue with retrieving links for PDFs from my Firebase storage and binding them to specific lists. The problem arises because the template is loaded before the links are fetched, resulting in the href attribute of the list remainin ...

javascriptfirebasevue.jsfirebase-storage

Excessive notification events are currently causing a blockage in the Angular app

Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...

javascriptangularsignalr

Determine if an HTML element contains a specific class using JavaScript

Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...

javascripthtmlclasscss

implement css property solely when device is in landscape orientation

I am facing an issue with applying CSS to a mobile device, specifically for horizontal orientation. When the device is in a vertical position, the page appears blank, and different CSS loads for desktop view. Although I have managed to make the desktop CS ...

htmlcssmobile

Why is Socket.io functioning on localhost but fails to work once deployed to Heroku?

Sharing my socket server code: const io = require("socket.io")(8080, { cors: { // origin: "http://localhost:3000", origin: "https://mern-bubble.herokuapp.com", }, }); This is the client-side implementation: useEf ...

javascriptnode.jsexpresssocket.io

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

The server is anticipating an html or txt file to be sent from a form named "websitetopdf". The file is dynamically created on client javascript and should only function properly on Chrome. Below is the form that needs to be used for sending: <form ac ...

javascriptajaxxmlhttprequest

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

Troubleshooting issues with the Select List component in ReactJS

Having an issue with the select list as the onChange event is not triggering. Struggling to set the selected value from the list in the this.state variable. Any assistance on this matter would be greatly appreciated. class SelectActivity extends React.C ...

javascriptreactjs

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

Attempting to connect SagePayments card elements to the paymentDiv. Followed their sample project for guidance, but encountering issues with populating the elements when running the program with a custom Sandbox merchantID and merchantKey. Chrome's de ...

javascriptc#jqueryhtmlopayo

recording the results of a Node.js program in PHP using exec

I'm attempting to retrieve the output from my node.js script using PHP exec wrapped within an ajax call. I am able to make the call and receive some feedback, but I can't seem to capture the console.log output in the variable. This is how I exec ...

javascriptphpajaxnode.jsexec

How can I retrieve data during a double-click event in Kendo Grid using Angular?

How can I retrieve data on the doubleClick event in a Kendo Grid? I want to access the same object that is fetched during the selected event, which would be the dataitem at the selected index row. HTML: <kendo-grid #myGrid [data]="gridDat ...

javascriptangulartypescriptkendo-uikendo-grid

Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

htmlcssreactjsmaterial-uimaterial-table

JavaScript library called "Error: JSON input ended unexpectedly"

I am currently operating a server using node.js and Express v4.0 Additionally, I am utilizing the request library. However, when receiving a response from the server, I encounter an Uncaught SyntaxError: Unexpected end of JSON input. The response I receiv ...

javascriptjsonnode.jsexpresshttprequest

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

javascripthtmlstringdom

Bringing in a variable from a component that is dynamically imported

I have a dynamically imported (Map) component on my page. const Map = dynamic(() => import('../components/Mapcomp'), { ssr: false, }) In addition to the component, I also need to import a variable from it. const [taskImg, setTaskImg] = useS ...

javascriptreactjsmodulenext.js

Trouble with importing css in Angular webpack due to ui-bootstrap integration

Currently, I am developing an Angular application with Webpack and was looking to incorporate Bootstrap for styling purposes. To achieve this, I first installed 'ui-bootstrap' using npm install angular-ui-bootstrap --save-dev. After installation ...

javascriptangularjstwitter-bootstrapwebpack

Steps to display the leave site prompt during the beforeunload event once a function has finished running

While facing a challenge with executing synchronous Ajax methods in page dismissal events, I discovered that modern browsers no longer support this functionality in the "beforeunload" event. To work around this issue, I implemented a new promise that resol ...

javascriptajaxasp.net-mvcgoogle-chromemicrosoft-edge

Modal window closed - back to the top of the page

I am struggling with a simple modal popup window that does not maintain the scroll position when closed, instead returning you to the top of the page. I am looking for a way to keep it at the same scroll position without much knowledge of Javascript. You ...

javascriptjqueryhtmlcss