All pastes #56995 Raw Edit

Unnamed

public text v1 · immutable
#56995 ·published 2006-05-19 02:24 UTC
rendered paste body
<style>
	div#nav {position:absolute; width:150px;top:10px;left:0;background-color:red}
	div#content{position:absolute;top:10px;left:0;margin-left:120px;margin-right:120px;background-color:blue;}
	div#rightcolumn{position:absolute;top:10px;right:0;width:120px;background-color:yellow;}
	div#header{position:absolute; top:0;left}
</style>

<body>
<div id="header"><h1>Three column layout with header</h1></div>

<div id="nav">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
   </ul>
</div>
<div id="content">
   <h1>A Simple Three Column Layout</h1>
   <p><strong>Step x - bold text here...</strong> In this example, we are going to use
 absolute positioning to create a three column layout, which is also a very common page
 layout you will see on the web. This format enables you to follow the widely-adopted
 convention of placing navigation in a vertical "stack" on the left side, and use the right
 side for things like testimonials, promotions, ads or other links.</p>
   <p>In this design, we'll fix the width of the side columns and let the content column
 fill the rest of the browser's width.</p>
</div>
<div id="rightcolumn">
   <p>This is temporary filler for the right column. We'll put something more interesting
 in here later.</p>
</div>
</body>