Two divs; left should be fixed width, right should fill rest of space
I've got the following HTML code:
<body>
<div id="Frame">
<div id="Body">
<div id="Panel">Side panel, fixed width.</div>
<div id="Content">The rest of the content, should be dynamic width and fill up rest of space horizontally.</div>
</div>
<div id="Foot">
<div>FooBar.</div>
</div>
</div>
</body>
What I'm trying to do i开发者_运维技巧s make it so that #Panel is of a fixed width (~200 pixels) and on the left hand side, and that #Content is immediately to the right of #Panel but is of "dynamic" width and fills the rest of the space in the browser screen horizontally. I've tried a lot of different things but haven't been able to get it working -- the farthest I've gotten is to the point where #Panel is on the left and #Content is to the right of #Panel and fills of the rest of the space, but #Content starts below #Panel whereas I'd like it to start at the same vertical position.
I did find In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?, however I wasn't able to apply it to the HTML above.
Here's that link, applied to your code:
CSS
#frame { background:pink }
#panel { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot { background:cornflowerblue }
HTML
<div id='frame'>
<div id='body'>
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
</div><!-- End #body -->
<div id='foot'>
<div>FooBar.</div>
</div>
</div><!-- End #frame -->
Works pretty well! Although, IMHO, you don't need the frame or body (but I don't know the master plan). That would look like this:
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
<div id='foot'>
<div>FooBar.</div>
</div>
加载中,请稍侯......
精彩评论