How do I get my divs to fill up the entire body

[Glenn]

I am trying to get 3 divs to fill up an entire body tag. I have been changing lots of specs but I can never get them to fill up 100%. I need the outer divs to be no smaller than 185px because of images. How do I get the middle one to fill up the rest of the page? Here is what I have right now, though it has changed a lot and I guess I will continue to change it.

.left-side {
    float: left;
    width: 16%;
    min-width: 185px;
    }

.main-div {
    float: left;
    width: 68%;
    }

.right-side {
    float: right;
    width: 16%;
    min-width: 185px;
    }

I have googled it but i guess I don't know exactly what to google.

 

[helloworld]

This should help you out:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/
also, im a little unclear what your problem is without a demo.. does the body itself have padding/margin 0 already?

 

[ReadOnly]

I just threw this into an empty page and it worked the way you described. Not sure why it is not working you.

 

[Analyst101]

you could put it all your divs inside a wrapper. Like this:

<div id="wrapper">
<div id="topMenu">
<!-- menu items -->
</div>

<div id="content">
<!-- content -->
</div>
</div>

then in your style sheet assign the width of the wrapper to the total width of your page:

#wrapper {
width:800px;
}

#topMenu {
width:800px;
height:200px;
}

hope this helps

 

[Glenn]

I just threw this into an empty page and it worked the way you described. Not sure why it is not working you.

Try adjusting the size of the browser window.

 

[Glenn]

What I want is for the left and right divs to stay at 185px and the middle div to adjust as the window adjusts. I just now added this to my main(middle) div.

.main-div {
	float: left;
	position: absolute;
	left: 185px;
	right: 185px;
	}

But now my problem is that the divs below it are adjusting up into my main div. I see my footer inside my main div.

 

[Glenn]

What I want is for the left and right divs to stay at 185px and the middle div to adjust as the window adjusts. I just now added this to my main(middle) div.

.main-div {
	float: left;
	position: absolute;
	left: 185px;
	right: 185px;
	}

But now my problem is that the divs below it are adjusting up into my main div. I see my footer inside my main div.

I figured out what was happening here. I had my body tag set to 100%. I took that out and everything else is ok. Not understanding why 100% =/= 100%.