How do i stop elements from moving when resizing the browser? - html

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;
}