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

Question

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.

Code:

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

.main-div {
float: left;
min-width: 100% - 370px;
}

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

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

Answer 1

Easier:



http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/



Pick the one you want and customize it to your theme.



Ron

Answer 2

A percentage actual isn't a ideal length. actual ought to take delivery of a length to artwork. frequently, content fabric will fill vertically without delay. A browser will kick in a scrollbar if its window is too small to teach all the web page content fabric till CSS is controlling the overflow. in case you purely favor a container of a particular actual for all pages, then purely use CSS: selector_name { width: 800px; actual: 800px; margin: 0 vehicle; } Ron

Answer 3

It is easy to make the right and left sides have a definite width as shown below:

.left-side {

position: absolute;

width: 185px;

left: 0;

}



.main-div {

position: absolute;

left: 185px;

right: 185px;

}



.right-side {

position: absolute;

width: 185px;

right: 0;

}



Or you can use percents as below:

.left-side {

position: absolute;

width: 16%;

left: 0;

}



.main-div {

position: absolute;

left: 16%;

right: 16%;

}



.right-side {

position: absolute;

width: 16%;

right: 0;

}



Did you need the right and left sides to be able to resize according to a certain image size?