CSS3 Content and wrapper div wont auto Resize - html

Question

HTML
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li><li>
Licensing</li><li>
About us</li><li>
Testimonials</li><li>
Contact Us</li><li>
Social <img src="image/arrow.png" width="8" height="4" />
<ul>
<li><img src="image/social/YouTube.png" width="32" height="32" title="Youtube" /></li>
<li><img src="image/social/Twitter.png" width="32" height="32" title="Twitter"></li>
<li><img src="image/social/Facebook.png" width="32" height="32" title="Facebook"></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<img src="image/placeholderimg.png">
<h2>Overview</h2>
<p>Filler Text</p>
</div>
</div>
CSS3
#content
{
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
resize: both;
}
#content p
{
max-width: 1100px;
margin: 0;
color: #ccc;
min-width: 960px;
}
#content h2
{
margin: 0;
color: #ccc;
min-width: 960px;
}
#content img
{
float: left;
padding-right: 20px;
padding-bottom: 20px;
}
#wrapper
{
min-width: 960px;
width: 50%;
margin: auto;
}
Fixed CSS3 Code
#content
{
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
resize: both;
}
#content p
{
max-width: 1100px;
margin: 0;
color: #ccc;
min-width: 960px;
}
#content h2
{
margin: 0;
color: #ccc;
min-width: 960px;
}
#content img
{
float: left;
padding-right: 20px;
padding-bottom: 20px;
}
#wrapper
{
min-width: 960px;
width: 50%;
margin: auto;
}
So I've been going around looking for a fix to this, but it seems like i can't find one... So I've come to ask the more seasoned programmers here at Stack-overflow. My Problem i have is need need the content div to re-size along with the rest of the elements, but i cant seem to do it properly. I don't want to completely cut it out using overflow, I want it to shrink along with the page re-size. Is there anyway of doing it? Provided above is the css3 code along with the html divs I'm trying to re-size. The main divs I'm trying to re-size is the content, or the wrapper as an over all if possible.
Edit: For some reason or the other I did something I cant explain that fixed the code, could some be so kindly and explain to me what I did?

Answer 1

width:auto;
Once try applying this to your code along with "min-width".. i don't know whether it works or not, but once give it a try..

Answer 2

The CCS3 property for "resize" allows the user to drag and resize the content div. You should use;
width: auto;
or you could use;
width: 100%;

Answer 3

Check out the fiddle. You do not need to set the widths of p or h tags. They usually take up the full space.
Setting the containers to width: 100% should do it.
http://jsfiddle.net/92gnt7qt/4/
#nav {width: 100%;min-width: 960px;}
#nav_wrapper {width: 100%;}
#content
{
width: 100%;
min-width: 960px;
}
If your parent has a min-width of 960px and the children have widths of 100%, the children will still only go to 960px.

Answer 4

It seems by removing
margin: auto;
It some how auto configured it to what I wanted it to do. Would anyone be able to help me understand this?