HTML/CSS Plotly plot size

Question

I have been attempting to construct a simple display for a couple of charts made with plotly. Using the useful embedding tools plotly provides, I have been able to get all plots on the webpage. (fairly simple)

Example of a chart to embed:

<div class="graph-container">
<div class="left" margin-bottom = "3vh">
	<a href="https://plot.ly/~WillemvanderSpek/11/" target="_blank" title="data_month" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/11.png" alt="data_month" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="WillemvanderSpek:11" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right", margin-bottom = "3vh">
	<a href="https://plot.ly/~jorisdh/6/?share_key=hHbxuR1CeSgxuCuc0jspKz" target="_blank" title="n_deaths_state" style="display: block; text-align: center;"><img src="https://plot.ly/~jorisdh/6.png?share_key=hHbxuR1CeSgxuCuc0jspKz" alt="n_deaths_state" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="jorisdh:6" sharekey-plotly="hHbxuR1CeSgxuCuc0jspKz" src="https://plot.ly/embed.js" async></script>
</div>

<div class="left", margin-bottom = "3vh">
	<a href="https://plot.ly/~WillemvanderSpek/2/" target="_blank" title="participant_relationships" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/2.png" alt="participant_relationships" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="WillemvanderSpek:2" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right", margin-bottom = "3vh">
	<a href="https://plot.ly/~voetbalsil/0/" target="_blank" title="d3-cloropleth-map"><img src="https://plot.ly/~voetbalsil/0.png" alt="d3-cloropleth-map" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="voetbalsil:0" src="https://plot.ly/embed.js" async></script>
</div>

<div class="left", margin-bottom = "3vh">
	<a href="https://plot.ly/~BramBakker/8/" target="_blank" title="stacked-bar-demographics" style="display: block; text-align: center;"><img src="https://plot.ly/~BramBakker/8.png" alt="stacked-bar-demographics" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="BramBakker:8" src="https://plot.ly/embed.js" async></script>
</div>

<div class="right">
	<a href="https://plot.ly/~voetbalsil/12/" target="_blank" title="Gun law strength" style="display: block; text-align: center;"><img src="https://plot.ly/~voetbalsil/12.png" alt="Gun law strength" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
	<script data-plotly="voetbalsil:12" src="https://plot.ly/embed.js" async></script>
</div>
</div>

Now how would I be able to set the size of these charts, and make them "sit" next to each other? I have tried using div-sizes in a separate CSS-file, and tried to change size locally. Finally, I've also tried a grid in order to line the graphs up, but they just end up overlapping.

Any feedback is greatly appreciated.

Answer 1

Thank you for clarification in comments.

'make them "sit" next to each other

Based on classes names you used (.left, .right) I assume you want these graphs to be in two columns and hope that below approach solves your problem.

.graph-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

display: flex ensures equal distribution of space between all children (.graph), while flex-wrap: wrap makes them wrap when necessary.

.graph {
  width: 50%;
}

.graph img {
  width: 100%;
}

width: 50% for .graph gives each of them 50% of container width, while width: 100% for inside images ensures that images generated in graphs don't expand over it's parent's (.graph) size.

If you would like to learn more about display: flex I highly recommend you this guide.

.graph-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.graph {
  width: 50%;
}

.graph img {
  width: 100%;
}

<div class="graph-container">
  <div class="graph left" margin-bottom="3vh">
    <a href="https://plot.ly/~WillemvanderSpek/11/" target="_blank" title="data_month" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/11.png" alt="data_month" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="WillemvanderSpek:11" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right" , margin-bottom="3vh">
    <a href="https://plot.ly/~jorisdh/6/?share_key=hHbxuR1CeSgxuCuc0jspKz" target="_blank" title="n_deaths_state" style="display: block; text-align: center;"><img src="https://plot.ly/~jorisdh/6.png?share_key=hHbxuR1CeSgxuCuc0jspKz" alt="n_deaths_state" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="jorisdh:6" sharekey-plotly="hHbxuR1CeSgxuCuc0jspKz" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph left" , margin-bottom="3vh">
    <a href="https://plot.ly/~WillemvanderSpek/2/" target="_blank" title="participant_relationships" style="display: block; text-align: center;"><img src="https://plot.ly/~WillemvanderSpek/2.png" alt="participant_relationships" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="WillemvanderSpek:2" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right" , margin-bottom="3vh">
    <a href="https://plot.ly/~voetbalsil/0/" target="_blank" title="d3-cloropleth-map"><img src="https://plot.ly/~voetbalsil/0.png" alt="d3-cloropleth-map" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="voetbalsil:0" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph left" , margin-bottom="3vh">
    <a href="https://plot.ly/~BramBakker/8/" target="_blank" title="stacked-bar-demographics" style="display: block; text-align: center;"><img src="https://plot.ly/~BramBakker/8.png" alt="stacked-bar-demographics" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="BramBakker:8" src="https://plot.ly/embed.js" async></script>
  </div>

  <div class="graph right">
    <a href="https://plot.ly/~voetbalsil/12/" target="_blank" title="Gun law strength" style="display: block; text-align: center;"><img src="https://plot.ly/~voetbalsil/12.png" alt="Gun law strength" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="voetbalsil:12" src="https://plot.ly/embed.js" async></script>
  </div>
</div>