I need some assistance with my website layout. I am trying to position an image on the left side and text content on the right. The issue I am facing is that when there are more lines of text than the image height, the text spills over onto the image's side. Can anyone provide guidance on how to resolve this? You can view a screenshot of my current setup for reference. Below is the CSS and HTML code I am using.
/* Disregard .choices and #questions as they are not related to the issue */
#questions > .question, #languages > .language{
margin: auto;
overflow: auto;
padding: 8px;
width: 75%;
}
.choices > .choice, #languages > .language{
background: #ffffff;
border-radius: 8px;
opacity: 0.7;
overflow: auto;
padding: 16px;
}
#questions, #languages{
margin-bottom: 48px;
}
#languages > .language{
margin-top: 8px;
}
.language > img{
float: left;
margin-right: 24px;
padding: 12px;
}<div id="javascript" class="language">
<img src="images/logo/js.png">
<div class="content">
<section class="overview">
<h2>Overview</h2>
<p></p>
</section>
<section class="comparison">
<h3>Pros</h3>
<ul class="pros">
<li>Executed on the client side, which means you don't have to worry about your server being overworked</li> <li>Easy to pickup, syntax is similar to the English language</li><li>Webpages can be easily extended</li></ul> <h3>Cons</h3>
<ul class="cons">
<li>Easily exploited</li>
<li>Rendered differently throughout different browsers</li>
</ul>
</section>
</div>
</div>