三欄位用absolute切版

by ken tsai

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test</title>
</head>
<body>
<div id="leftside">
<ul><li><a href="">Left Menu 1</a></li><li><a href="">Left Menu 2</a></li></ul>
</div>
<div id="rightside">
<ul><li><a href="">Right Item 1</a></li><li><a href="">Right Item 2</a></li></ul>
</div>
<div id="content">
<h2>Content Title</h2>
<p>Some paragraph.</p>
<h2>Another title</h2>
<p>Some other paragraph with total nonsense.  Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>
</body>
</html>

CSS

html {
    min-width: 550px;/*這個設的寬度總和要對*/
    position: relative;/*要定位*/
}

   h2 {margin-top: 0;}
        #leftside {
            position: absolute;
            left: 0;
            width: 200px;
        }
        #rightside{
            position: absolute;
            right: 0;
            width: 150px;
        }
        #content {
            min-width:200px;
            margin: 0 150px 0 200px;
        }