-1

I tried to google it but most of the stuff people just say "use position absolute for the inner elements and it will fix it" but I do not want to do that since I want margins for my boxes in the container.

This is the code:

HTML:

<div class = "main_container">
    <div class = "container">
      <div class = "box"></div>
      <div class = "box"></div>
      <div class = "box"></div>
      <div class = "box"></div>
    </div>
  </div>

CSS:

.main_container{
   position: relative;
    top: 49px;
    background-color: orange;
    height : 1446px;
    width: 1496px; 
    margin: auto;
    z-index: 5;
}

.container{
position: relative;  /* I tried using position absolute too, but it didnt work */
    background-color: white;
    top: 0;
    right: 200px;
    width: 1098.8px;
    min-width: 1098.8px;
    max-width: 1098.8px;
    height: 1041px;
    margin: 0 auto;
}

.box{
position: relative; /
    top: 50px;
    border: solid;
    border-color: grey;
    width: 208px;
    height: 335px;
    margin-right: 2px;
    margin-bottom: 3px;
    display: inline-block;
}

How should I fix this? The boxes shift whenever I zoom in or out? I've literally spent the whole day trying to fix this situation, but no luck.

Panda
  • 6,955
  • 6
  • 40
  • 55
Matthew Francis
  • 67
  • 2
  • 7
  • What does "shift" mean? Are you perhaps seeing a slight move to the left to accommodate the scrollbar in the browser window? – Scott Mar 28 '16 at 23:03
  • and what do you mean by "zoom in/out" - resize the window? – Johannes Mar 28 '16 at 23:10
  • Yup, shift as in moving. Basically in this scenario the boxes create 2 rows when I zoom out (control +scroll wheel), and in this case I only want one row of boxes. – Matthew Francis Mar 28 '16 at 23:57

1 Answers1

0

Take a look at this question. They seem to have the same issue as yourself, but the answer given states than borders can be kept by containing them inside inner DIV tags. To keep the containers in position using float is recommended, in your case from your code to have them side by side you could use float: left; which would line them all up next to each other relative to the left. Make sure to check out the JSFiddle demoed here

Community
  • 1
  • 1
Luke Cilia
  • 36
  • 7
  • Unfortunately it didnt work, I had to zoom it out a bit more to see that it didnt work as intended. If I did this correctly, I added float:left; for the boxes. Any other suggestions? – Matthew Francis Mar 29 '16 at 00:08