how to align two divs side by side when one has margin auto

Question

I have a div that has margin: auto so it can float in the center of the page. This page also has a zoom feature that zooms in on that element and I want there to be a min-margin-left on that element.

I have tried creating a new element that has a fixed width, but when I use float: left on both of those elements it doesn't work, and the one that has a fixed width (blue) floats on top of the other one (red).

I tried looking at other questions, but they do not deal with a div that has margin: auto, and a question about min-margin doesn't deal with two elements.

Here's my current code:

.main_field {
  width: 1000px;
  margin: 20px auto;
  height: 100px;
  border: none;
  display: inline-block;
  padding: 75px;
  background-color: red;
}

<div style="background-color: blue; height: 100px; display: inline-block; width: 50px;"></div>
<iframe class="main_field "></iframe>

Answer 1

The problem is the display - to make your centering work you need the element to be a block:

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

<iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>

To fake a minimum margin you can use a container with padding:

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

.container {
  padding-left: 60px;
  padding-right: 60px;
  background-color: blue;
}

<div class="container">
  <iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>
</div>