How do I put text next to an image? - html

Question

So I've read about a hundred questions and answers on this and clearly I'm doing something wrong here... (Ignore the seriousness of the text, I'm making a loan calculator as an ability test)
I want my image, next to my text on the same line, this is how it currently looks
Here is my relevant code
.topContainer {
background-color: #0f3759;
overflow: hidden;
padding: 20px;
width: 100%;
}
.topContainer p {
width: 60%;
float: left;
}
.topContainer img {
margin-left: 35%;
width: 40%;
}
<div class="topContainer">
<h2 id="headline">Personal Loans</h2>
<p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
<p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
<br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
<br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
<img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>

Answer 1

As PaulieD suggested, removing your image margin puts it all on one line.
Your problem is that you are asking for the text to take up 60% of the width, the image to take up 40% of the width, and the image margin to take up a further 35% of the width. Obviously this takes up more than 100% of the page so it shunts the extra stuff below. Here's what it looks like without the margin:
.topContainer {
background-color: #0f3759;
overflow: hidden;
padding: 20px;
width: 100%;
}
.topContainer p {
width: 60%;
float: left;
}
.topContainer img {
width: 40%;
}
<div class="topContainer">
<h2 id="headline">Personal Loans</h2>
<p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
<p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
<br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
<br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
<img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>
Just as a "best practices with modern HTML/CSS" thing, an easier way to add gaps between elements is to use something like flex or grid. Below is an example using grid, with a gap in between the elements:
.topContainer {
background-color: #0f3759;
overflow: hidden;
padding: 20px;
width: 100%;
}
.mainBody {
display: grid;
grid-template-columns: 3fr 2fr;
grid-column-gap: 50px;
}
<div class="topContainer">
<h2 id="headline">Personal Loans</h2>
<div class="mainBody">
<div class="text">
<p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
<p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
<br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
<br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
</div>
<img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>

Answer 2

Use bootstrap its very easy and save you from lot of css coding...
...but if you dont want to use I would say use flex box for it. :)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can see my solution for you here
.topContainer { display: flex; }

Answer 3

try this:
.topContainer {
background-color: #0f3759;
overflow: hidden;
padding: 20px;
width: 100%;
}
.contain{
display: flex;
}
.topContainer .text_block {
float: left;
}
.topContainer img {
width: 40%;
height: auto;
float: right;
}
<div class="topContainer">
<h2 id="headline">Personal Loans</h2>
<div class="contain">
<div class="text_block">
<p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
<p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
<br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
<br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
</div>
<img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>
</div>
I've put the two paragraph tags in a container div, then utilised flex box to put both the paragraph container and the image container on the same line - you can then set any padding or margin on their. As you've set the image width to a percentage, I've also set it's height to auto to allow it to keep it's ratio.