0

I want two <div> elements side-by-side and I have done this using relative and inline-block but the leftmost <div> is shifted down. Why? Is there a way to fix?enter image description here

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
svg#plot2svg  {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
}
form#interactive-controls {
  border: 1px solid black;
}
div#bottom-panel {
  border: 1px solid red;
}
div#interactive-container {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
}
div#plot2 {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
}
</style>
</head><body>
<div id='bottom-panel'>
<div id='interactive-container'>
<form id='interactive-controls'>
<p>This is just a test.</p>
<table>
<tr><td><label for="sliderA">A</label></td><td><input type="range" id="sliderA" min="0" max="1.1" value="1" step="0.01"></td><td><span id="labelA">1.000</span></td></tr>
<tr><td><label for="sliderB">B</label></td><td><input type="range" id="sliderB" min="0" max="1.1" value="1" step="0.01"></td><td><span id="labelB">1.000</span></td></tr>
<tr><td><label for="sliderC">C</label></td><td><input type="range" id="sliderC" min="0" max="1.1" value="1" step="0.01"></td><td><span id="labelC">1.000</span></td></tr>
</table>
</form>
</div>
<div id="plot2"><svg id='plot2svg' />
</div>
</div>
</body>
</html>
Jason S
  • 184,598
  • 164
  • 608
  • 970

1 Answers1

0

just use a flexbox...

svg#plot2svg {
  border: 1px solid black;
}

form#interactive-controls {
  border: 1px solid black;
}

div#bottom-panel {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}
<!DOCTYPE html>
<html>

<head>
  <style type='text/css'>

  </style>
</head>

<body>
  <div id='bottom-panel'>
    <div id='interactive-container'>
      <form id='interactive-controls'>
        <p>This is just a test.</p>
        <table>
          <tr>
            <td><label for="sliderA">A</label></td>
            <td><input type="range" id="sliderA" min="0" max="1.1" value="1" step="0.01"></td>
            <td><span id="labelA">1.000</span></td>
          </tr>
          <tr>
            <td><label for="sliderB">B</label></td>
            <td><input type="range" id="sliderB" min="0" max="1.1" value="1" step="0.01"></td>
            <td><span id="labelB">1.000</span></td>
          </tr>
          <tr>
            <td><label for="sliderC">C</label></td>
            <td><input type="range" id="sliderC" min="0" max="1.1" value="1" step="0.01"></td>
            <td><span id="labelC">1.000</span></td>
          </tr>
        </table>
      </form>
    </div>
    <div id="plot2"><svg id='plot2svg' />
    </div>
  </div>
</body>

</html>
Holger Will
  • 7,228
  • 1
  • 31
  • 39