controlling div's width

Hello I am trying to build a fluid design, not sure why but I can't get on of the things to work. So if the window is resized to resize the div menus with it rather then forcing the div onto the other element in the theme.

Here is the code I am currently using for my CSS

#stats-panel { 
  position: fixed;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: #ffffff;
  background-image: none;
  background-origin: padding-box;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-size: auto;
  border: 2px solid #ffffff;
  min-width: 680px;
  max-width: 980px;
  width: 100%;
  -moz-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 420px;
  margin-top: 0px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  top: 58px;
  left: 0px;
  right: auto;
}

When I overpass the max-width this div collides with others div, what can i do to keep say 20px margin between the two elements but still allow this div (stats开发者_如何学C-panel) to be resized as the window is resized.

---

not too sure what the entire layout is for your webpage, but supposing we're looking at a 2 column layout that has a main body div and a sidebar div, then this is probably what you can do:

firstly in your html document:

<div id="wrapper">

    <div id="main">
        <h2>This is the main body</h2>
    </div>

    <div id="sidebar">
       <h2>This is the sidebar</h2>
    </div>

</div>

following on to CSS:

#wrapper{
    padding:0;
    margin:0 auto;
    min-width:940px;
    max-width:1280px;
}

    #main{
        margin-left:0;
        margin-right:280px;
    }

    #sidebar{
        float:right;
        width:250px;
    }

the basic idea here is to set a range width instead of a dead value to the wrapper first. following which, decide which column will have a fixed width and which will have a fluid width. for the fluid column, which is the #main div in this case, do not set a fix width; instead set a margin that pushes it to its position. doing this will maintain a fixed "padding" between the fixed column and the fluid column. in my example, this "padding" will be maintained at 30px or so, regardless of how the browser resizes. the fixed column will remain at 250px with a "padding" of 30px from the fluid column, and the fluid column will in turn have a "variable" width, depending on the browser window size.

hope this helps ;)

---

This site has many good examples of fluid CSS layouts: http://www.glish.com/css/index.html

---

The answer probably lies with the relation to the other elements. Since this div has a position:fixed it is taken out of the regular flow, much like absolute. Its position is relative to the browser window and any relation to other elements is irrelevant.

You will have to somewhat simulate the relation behavior for this div to other elements so that they begin to move. There are few ways you can do that and will depend on your current layout.