CODEWITHSUNDEEP
htmlcssmarginminimize
ooomphlaa
ooomphlaa

Reputation: 77

Right margin lost when minimizing window

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>

Upvotes: 0

Views: 857

Answers (3)

ooomphlaa
ooomphlaa

Reputation: 77

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.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

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>

Upvotes: 0

D&#225;vid Szab&#243;
D&#225;vid Szab&#243;

Reputation: 2247

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>

Upvotes: 0

Related Questions