Positioning the svg on top like this

Where I can move it up down left or right without messing up the rest of the code.

In the main code the svg would be floated, and so, how do you add margins to a floating svg?

Main Code:
https://jsfiddle.net/m9bkze51/15/

svg code:
https://jsfiddle.net/03ergpm1/

image

Try this…


    <div class="container">
      <div class="left">
        <button id="button">Play / Pause</button>
      </div>
      <div class="right">svg here</div>
    </div>

Then for the relevant CSS…

.container {
  display: flex;
  border: 1px solid lime;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
}

.left {
  margin: 0;
}
.right {
  width: 80px;
  height: 80px;
  background: red; /*simulating svg img*/
}

Then take the 20px bottom margin off your button, I put it on the .container above.


button {
  font-size: 22px;
  height: 29px;
  cursor: pointer;
  background: green;
  border: 1px solid #0059dd;
  white-space: nowrap;
  font-family: "Times New Roman", Times, serif;
  /*margin-bottom: 20px;*/
}

All that should give you this…
flex

The red line beside your clear input is coming from the red background here…

.container-right {
  float: right;
  /*background: red; /*remove this*/
}
1 Like