调整浏览器大小时如何阻止元素移动？

Question

When i resize my browser my div tags resize themselves. I've added min-width: which i thought would stop it but it does not.

html:

<div id="wrapper">
<div id="adleft"></div>
<div id="adright"></div>

css:

#wrapper{ 
  max-width: 50%;
  margin: 0 auto;
}

#adleft {
  height: 500px;
  min-width: 48%;
  background-color: red;
  float: left;
}
#adright {
  height: 500px;
  min-width: 48%;
  background-color: red;
  float: right;
}

Answer 1

The reason is that you are applying a min-width as a % not in px .

Using a % means that when the browser window shrinks 48% becomes less and less pixels. If you define the min-width in pixels it will stop shrinking when it hits the minimum number of pixels you declare.

Answer 2

Html:

<div id="wrapper">
<div id="ad">
    <div id="adleft"></div>
    <div id="adright"></div>
</div>

Include this in your Css:

#ad
{
    Display: table;
    Margin-left: auto;
    Margin-right: auto;

}
#adleft 
{
    height: 500px;
    min-width: 48%;
    background-color: red;
    Margin-right:20px;
}
#adright
{
    height: 500px;
    min-width: 48%;
    background-color: red;
}

Answer 3

This worked for me : Html:

<div id="wrapper">
<div id="adleft"></div>
<div id="adright"></div>

css:

#wrapper{ 
max-width: 960px;
min-width: 960px;
margin: 0 auto;
margin-top: 30px;
}

#adleft {
height: 500px;
width: 48%;
background-color: red;
float: left;
}
#adright {
height: 500px;
width: 48%;
background-color: red;
float: right;

}