I'm trying to figure this out... i have a 3 column layout and i need the center column to resize automatically as the browser shrinks.
The idea here is to NOT use @media queries and pixel breakpoints. Which is why the #wrapper & #mid divs are set to 100% width.
However the issue is that instead of the center column getting thinner, all the columns just pop down. My CSS bl0wz, so any help would be appreciated. Below is what i have so far.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</title>
</head>
<style type="text/css">
html, body { padding:0px; margin:0px; }
#wrapper {
max-width:1024px;
width:100%;
padding:0px;
margin:0 auto;
background:#CCC;
}
#left {
float:left;
max-width:190px;
min-width:190px;
width:190px;
height:500px;
background:#9CF;
}
#mid {
float:left;
max-width:644px;
min-width:190px;
width:100%;
height:500px;
background:#9C6;
}
#right {
float:left;
max-width:190px;
min-width:190px;
width:190px;
height:500px;
background:#CC6;
}
</style>
<body>
<div id="wrapper">
<div id="contentpad">
<div id="left">Left</div>
<div id="mid">Middle</div>
<div id="right">Right</div>
</div>
</div>
</body>
</html>