how to set a the minimal height of a div to adjust it's content

I'm trying to make a webpage with the following structure: 1 big div (main), and 3 divs inside it, a left shadow, content, and a right shadow. these is the css code for them, mleft and mright are the shadows.

body,html{height:100%;}
.main {
width:900px;
    height:100%;
}

.mleft, .mright {
width:25px;
height:100%;
float:left;
}
.mleft { background-image: url("shadowleft.jpg"); }
.mright { background-image: url("shadowright.jpg"); }

.content {
width:850px;
float:left;
   background-color:red;
}

And the html is like this:

<div class="main">
  <div class="mleft"></div>开发者_如何学Python
  <div class="mcontent">
    (content, some text and images)
  </div>
  <div class="mright"></div>
</div>

I want this to be viewable in big and small screens, the problem is that when viewing in small screens or making the window small, the main div height goes below the height of content div, so the shadow is too short to cover content div.

I've been playing with min-height, but min-height:auto, doesn't work, and none of the values of "overflow" does what I want.

Any clean way of solving this that works on any browsers? Should I use javascript?, redo everything another way?

Update:This is an image of how it looks

Update2: The height of main seems to be directly the height of the window (100%) so I main is always the size of the window, which if small it's less than the content inside it, I tried playing with min-height with no success. The expected result is that it resizes until it reaches the size of it's contents, when it should stop.

---

OK, I've deleted all the old stuff... found a solution using positioning :)

http://jsfiddle.net/Damien_at_SF/AtX4A/

Basically, the shadows sit inside the content div and with absolute positioning are placed at 0,0 left and 0,0 right (or you could move them outside the content using negative positioning)

UPDATE: put the main div back in and applied margin:auto to it's style in order to center the whole lot :)

HTML

<div class="main">
  <div class="mcontent">
    <div class="mleft"></div>
    <div class="mright"></div>
    (content, some text and images)>
    <div style="clear:both;"></div>
  </div>
</div>

CSS

body,html{
    height:100%;
    margin:0px;
    padding:0px;
}

.main {
  width:900px;
  height:100%;
  margin:auto;
}

.mleft, .mright {
    width:25px;
    height:100%;
}

.mleft { 
    background:green;
    position:absolute;
    top:0px;
    left:0px;
}

.mright { 
    background:blue;
    position:absolute;
    top:0px;
    right:0px; 
}

.mcontent {
    width:850px;
    background-color:red;
    position:relative;
    padding-left:25px;
}

Hope that helps :)