Struggling to figure this out after spending a lot of time on it. Here's what I'm trying to accomplish:
I have a 2 column layout, with the left column having a fixed width of 220px and the right column having a fluid width.
The code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
Currently, I am using clear: both in the right column, which causes all content after it to move under the left column. While this behavior is correct, I need clear: both to only affect the right column and not move underneath it.
Is there a way to achieve this while still maintaining the basic float concept of the page design?
UPDATE: For a better understanding of my issue, please refer to this link: http://jsfiddle.net/k4L5K/1/