I am having trouble.. I need to make a fluid layout for a website with 3 columns. The two outside ones need to be equal width, and the middle one is a main content area which is going to be larger in width.Below is the css code I have been using. The problem is when I minimize the site using IE the middle drops out to the bottom and leaves a large white space where it used to be, surrounded by the two outside columns. Please help!!!
p.s. what is the best method to make a 3 column fluid layout ????
#header {
background-color:#FFFFFF;
text-align: center;
}
#left {
float:left;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}
#right {
float:right;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}
#center {
background-color:#ffffff;
width: 75%;
padding: 0.5em;
margin-left: 100px;
margin-right: 80px;
}
#footer {
clear:both;
background-color:#CCC08F;
padding:.5em;
background-color: white;
font-size: 12px;
text-align: center;
padding-top: 30px;
}
#container {
width: 90%;
margin: 0 auto;
background-color: white;
}
p.s. what is the best method to make a 3 column fluid layout ????
#header {
background-color:#FFFFFF;
text-align: center;
}
#left {
float:left;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}
#right {
float:right;
width:100px;
padding:0.5em;
background-color:#ffffff;
text-align: center;
}
#center {
background-color:#ffffff;
width: 75%;
padding: 0.5em;
margin-left: 100px;
margin-right: 80px;
}
#footer {
clear:both;
background-color:#CCC08F;
padding:.5em;
background-color: white;
font-size: 12px;
text-align: center;
padding-top: 30px;
}
#container {
width: 90%;
margin: 0 auto;
background-color: white;
}
