Anton :
I am new to HTML and CSS, first year IT student. I need to display text and pictures next to each other. The text should occupy most of the page with the images to the right of the text. I know I will need to use CSS for this but I have no idea how.
<!-- Add images of accepted payment Methods -->
<div class="Pics">
<img src="Edgars.jpg" alt="Logo of Edgars Thank U Card">
<img src="Jet.PNG" alt="Logo of Jet Thank U Card">
<img src="VisaCard.jpg" alt="Logo of Visa Card">
<img src="MasterCards.png" alt="Logo of Master Card">
<img src="SnapScan.png" alt="Logo of SnapScan">
<img src="Standard Bank.png" alt="Logo of Standard Bank">
</div>
<!-- Adding paragraphs -->
<h6 id="h06">Payment Methods</h6>
<p id="headings">Edgars or Jet Card:</p>
<p>Visit any of our Campuses that accept Debit and Credit Cards, and you can also pay with your Edgars or Jet Card! Please note that your Edgars or Jet Thank U Card along with the Card Holder must be present for the transaction. Proof of ID will be required</p>
<p id="headings">Debit or Cerdit Card:</p>
<p>A cardholder begins a credit card transaction by presenting his or her card to a merchant as payment for goods or services. The merchant uses their credit card machine, software or gateway to transmit the cardholder’s information and the details of
the transaction to their acquiring bank, or the bank’s processor. </p>
<p id="headings">SnapScan</p>
<p>Download the SnapScan App to your Mobile Phone or Tablet Device. Open the SnapScan App, tap on “Scan” and scan the SnapCode displayed at the shop. This identifies the shop and prompts you to enter the amount you wish to pay. Enter your PIN to secure
and complete the transaction. Richfield will receive a notification containing a confirmation of payment from SnapScan and your account will be updated accordingly.</p>
<p id="headings">Standard Bank M65 Cash Payment</p>
<p>Direct Cash Deposits can be made at any branch of Standard Bank using the M65 form which can be obtained from your nearest Campus. This form can only be used at Standard Bank branches. Don’t forget to ensure that your name AND student number are on
both sections of the form.</p>
<p id="headings">Electronic Funds Transfer (or CDI)</p>
<p>Name of Bank: Standard Bank of South Africa</p>
<p>Name of Account: Richfield Graduate Institute of Technology (PTY) Ltd.</p>
<p>USE YOUR ICAS NUMBER, INITIALS AND SURNAME AS REFERENCE</p>
</div>I've tried numerous examples online but I can't seem to get it to work. Below is a picture of how it's supposed to look. Any help will be appreciated. Thank you in advance
DCR :
flex is definitely the way to go. This should get you started. If you upload your pictures to imgur we could see how the actual images work
html,body{
margin:0;
padding:0;
}
#container{
display:flex;
width:100vw;
}
#left{
display:flex;
flex-direction:column;
width:70%;
}
#right{
display:flex;
width:30%;
justify-content:center;
margin-top:25%;
}
#group1,#group2{
display:flex;
flex-direction:column;
}<div id='container'>
<div id='left'>
<!-- Adding paragraphs -->
<h6 id="h06">Payment Methods</h6>
<p id="headings">Edgars or Jet Card:</p>
<p>Visit any of our Campuses that accept Debit and Credit Cards, and you can also pay with your Edgars or Jet Card! Please note that your Edgars or Jet Thank U Card along with the Card Holder must be present for the transaction. Proof of ID will be required</p>
<p id="headings">Debit or Cerdit Card:</p>
<p>A cardholder begins a credit card transaction by presenting his or her card to a merchant as payment for goods or services. The merchant uses their credit card machine, software or gateway to transmit the cardholder’s information and the details of
the transaction to their acquiring bank, or the bank’s processor. </p>
<p id="headings">SnapScan</p>
<p>Download the SnapScan App to your Mobile Phone or Tablet Device. Open the SnapScan App, tap on “Scan” and scan the SnapCode displayed at the shop. This identifies the shop and prompts you to enter the amount you wish to pay. Enter your PIN to secure
and complete the transaction. Richfield will receive a notification containing a confirmation of payment from SnapScan and your account will be updated accordingly.</p>
<p id="headings">Standard Bank M65 Cash Payment</p>
<p>Direct Cash Deposits can be made at any branch of Standard Bank using the M65 form which can be obtained from your nearest Campus. This form can only be used at Standard Bank branches. Don’t forget to ensure that your name AND student number are on
both sections of the form.</p>
<p id="headings">Electronic Funds Transfer (or CDI)</p>
<p>Name of Bank: Standard Bank of South Africa</p>
<p>Name of Account: Richfield Graduate Institute of Technology (PTY) Ltd.</p>
<p>USE YOUR ICAS NUMBER, INITIALS AND SURNAME AS REFERENCE</p>
</div>
<div id='right'>
<div id='group1' class="Pics">
<img src="Edgars.jpg" alt="Edgars">
<img src="Jet.PNG" alt="Jet">
<img src="VisaCard.jpg" alt="Visa">
</div>
<div id='group2' class='Pics'>
<img src="MasterCards.png" alt="Master">
<img src="SnapScan.png" alt="SnapScan">
<img src="Standard Bank.png" alt="Standard">
</div>
</div>
</div>Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=391182&siteId=1