contact-solver: fixing images benchmark

Author: quentinll

publications/simple-contact-solver/index.html

@@ -184,15 +184,15 @@ <h2 class="title is-3">Abstract</h2>
       <div class="column is-four-fifths">
         <h2 class="title is-3">Benchmarks</h2>
         <div class="content has-text-justified">
-          <div class="row">
-            <div class="column">
-              <image src="./static/images/ur5.png" alt="Computational time for UR5 robot." style="width:30%">
+          <div class="results-row">
+            <div class="results-column">
+              <image src="./static/images/ur5.png" alt="Computational time for UR5 robot." style="width:100%">
             </div>
-            <div class="column">
-              <image src="./static/images/humanoid.png" alt="Computational time for MuJoCo humanoid." style="width:30%">
+            <div class="results-column">
+              <image src="./static/images/humanoid.png" alt="Computational time for MuJoCo humanoid." style="width:100%">
             </div>
-            <div class="column">
-              <image src="./static/images/cassie.png" alt="Computational time for Cassie robot." style="width:30%">
+            <div class="results-column">
+              <image src="./static/images/cassie.png" alt="Computational time for Cassie robot." style="width:100%">
             </div>
         </div>
       </div>

publications/simple-contact-solver/static/css/index.css

@@ -127,6 +127,20 @@ body {
   margin: 0;
 }
 
+ /* Three image containers (use 25% for four, and 50% for two, etc) */
+ .results-column {
+  float: left;
+  width: 33.33%;
+  padding: 5px;
+}
+
+/* Clear floats after image containers */
+.results-row::after {
+  content: "";
+  clear: both;
+  display: table;
+} 
+
 
 .interpolation-panel {
   background: #f5f5f5;