Gamecrafter Gamecrafter - 5 months ago 9
CSS Question

How do I keep my image on the left side and my content on the right?

I'm making a simple website. I'm trying to display the image on the left side and the text content on the right. However, if there is more lines of text than the height of the image, the text carries over to the image's side. Can anyone help me fix this? Here's a screenshot of what I have right now, and what I'm talking about. Below is the CSS and HTML I'm using.



/* Please do ignore .choices and #questions, that's for something else, not related to the question */
#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>




Answer

The easiest method is to insert this to make you #javascript element a flexbox container:

#javascript {
  display: flex; 
  }

/* Please do ignore .choices and #questions, that's for something else, not related to the question */

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