In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>
<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>
That should do it (obviously implementation will vary based on where it is in the page, but I think that's the concept you're looking for).
Is this what you're looking for?
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
/*Width of frame div*/
height: 100%;
overflow: hidden;
/*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent {
position: fixed;
top: 0;
left: 200px;
/*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube {
margin: 15px;
/*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
/*IE6 hack*/
padding: 0 0 0 200px;
/*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
/*IE6 hack*/
height: 100%;
width: 100%;
}<div id="framecontent">
<div class="innertube">
<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</p>
</div>
</div>I feel your pain, but try not to look at it as time wasted. I'm sure you have a much better grasp of CSS than you previously did. Keep working with it and you'll start seeing the advantages. I personally have found CSS to be one of those things that takes a lot of practice to become proficient in. I've been using CSS based layouts for 5 years and I still learning interesting tricks everyday.
I think this is what you're looking for:
<table style='width: 100%;'>
<tr>
<td style='width: 200px;'></td>
<td></td>
</tr>
</table>
Thank me later. =P
(I'm obviously joking.... kind of...)