content area needs to be more fluid

[Christech4000]

I am trying to account for screen size differential by having a more fliud and flexable css declaration for the conent, story _rule.I tried using percent am nd didnt get the shinkage to any appropriate size to accoadate the range I am looking for..the page source is at www.invision-online.com on the Sites page, The locke Kennels update project.

the CSS >>>






body {background:url(../media/Curtain3.jpg) top left repeat-y #FFCC99;

}


page {width:80%;
}

h1 { font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CC0000;
}



h2 {font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CC0000;
font-size:16px;
letter-spacing:.3ex;
font-weight:bold;
}

h3 {font-size:large;
color:#CC0000;

}

p {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#CC6600;
}



a { color:#FFFFFF;
text-decoration:none;
}

a hover{ color:#FF0000;
text-decoration:underline;
}


/*start header*/



#nav { background:#CC0000;
height:10px;
width:550px;
text-align:center;
border-bottom:solid 2px #CC0000;
padding:05px 0px 2px 0px;
float:right;


}
#nav2 { background:#CC0000;
height:10px;
width:625px;
text-align:center;
border-bottom:solid 2px #CC0000;
padding:5px 0px 2px 0px;
float:right;


}


#nav p {font-size:18px;
letter-spacing:.1ex;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;


}
#nav2 p {font-size:18px;
letter-spacing:.1ex;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;

}




#header { background:#FFFFFF;
width:100%;
height:123px;
border-top:solid 5px #CC0000;
border-bottom:solid 5px #CC0000;
margin:0px 0px 0px 153px;

}

#banner { background-image:url(../media/backglojj.jpg) ;

height:130px;
width:425px;

float:left;

}

#bannera { background-image:url(../media/backglojj.jpg);
height:130px;
width:425px;


}


/*start content*/


#content{
height:100%;
width:50%;
flaot:left;
position:relative;
background:#FFFFFF;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 153px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}




#story {
width:inherit;
height:100%;
background:#FFFFFF;
border:solid thin #FFCC66;
margin:10px 10px 0 10px;
padding-right: 5px;
}



#story img {text-align:center;
border:solid 2px #FFCC66;
margin: 10px 10% 10px 10%;
padding:5px 5px 5px 5px;
}



#story h1{background:#CC0000;
color:#FFFFFF;
width:100%;
margin:0px 3px 0px 3px;
padding:5px 0px 0px 10px;}





#story h3{padding:0px 10px 0px 10px;}



#story p { padding:0px 13px 0px 13px;}




#pic {background:#FFFFFF;
width:200px;
height:100%px;
float:right;
margin-right:0px;
}


.npic{height:90%;
width:90%;
background:#FFFFFF;
border:solid thin #FFCC66;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;

}

.npic p{margin-left:5px;
margin-top:-15px;}


.npic img{padding-top:3px;
padding-left:3px;
padding-bottom:3px;
padding-right:3px;
margin-top:10px;
margin-left:12px;

border: solid 2px #FFCC66;
}


/*start sidebar*/


#sidebar {
height:100%;
width:20%;
float:right;
position:absolute; top:199px; left:70%;
color:#FFCC99;
background:#FFFFFF;
vertical-align:top;
padding: 10px 10px 0px 10px;

}


#sidebar ul{padding:-5px 0 0 0}


#sidebar ul, li{font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
font-weight:bold;
color:#CC0000;
list-style-type:circle;
margin: -5px 0 0 0;
padding:-5px 0 0 0;
}




#footer { height:50px;
width:100%;
background-color:#CC0000;
margin-left:153px;
}

#footer p{text-align:center;
color:#FFCC33;
padding-top:15px;
}

[Apostropartheid]

The locke Kennels update project.


What are you on about, lad?