Right margin lost when minimizing window

Question

I can provide more specific code if necessary but this basic code should demonstrate my issue. Essentially my page looks great when the window is maximized (min-width + left + right margin). But when you minimize the window the right margin disappears.

The idea is to have a body that always maintains a specific page margin around the content. Then to have the content always centered.

Code below. I've simplified my implementation to highlight my issue.

<style>
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body style="margin: 10px 20px 5px 20px;">
    <div class="panel">
    ....my content
    </div>
</body>

I ended up solving my issue in another way. Below is the solution I ended up using. — ooomphlaa, Jun 19 '14 at 13:42

score 0 · Answer 1 · answered Jun 13 '14 at 20:11

0

You need to use 'display:inline-block;'

http://jsfiddle.net/CunsN/

<body style="display:inline-block;margin: 10px 20px 5px 20px;">
  <div class="panel">
  ....my content
  </div>
</body>

answered Jun 13 '14 at 20:11

Dávid Szabó

2,235
2
14
26

This seems to be working. Thanks! I still need to check a few other things though. – ooomphlaa Jun 16 '14 at 14:42

score 0 · Answer 2 · answered Jun 13 '14 at 20:11

0

try position fixed and forget about inline style

<style>
body{
   position:fixed;
   top 10px;
   right:20px;
   bottom:5px;
   left:20px;
   display:block;
}
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body>
    <div class="panel">
    ....my content
    </div>
</body>

answered Jun 13 '14 at 20:11

Gildas.Tambo

22,173
7
50
78

Thanks but setting a fixed position would require me changing some of the positions and styles of the rest of the elements. Although I will give this a try just to see how it works in production. Thanks. – ooomphlaa Jun 16 '14 at 14:41

score 0 · Accepted Answer · answered Jun 19 '14 at 13:47

Here is the solution that I ended up using.

<style>
    body{
      background-color: #F5F5F5;
      min-width: 1020px;
      margin-top: 10px;
      margin-bottom: 5px;
    }
   .panel{
      background-color: #FFFFFF;
      position: relative;
      margin: 0px 20px 15px 20px
    }
</style>

<body>
    <div class="panel">
       ....my content
    </div>
</body>

Thank you for all your suggestions.

Right margin lost when minimizing window

3 Answers3