Hey, i'm trying to make my second wordpress theme and i want to have my sidebar items hanging over the side like these two examples: http://www.larissameek.com/ and here is what i want to do. thanks in advance everyone, i searched around but I am not sure how i would work the layout out.
Here's one way. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } #wrapper { width: 80%; margin: 0 auto; border: 1px solid black; display: table; /* see http://garyblue.port5.com/webdev/floatdemo.html */ } #banner { text-align: center; border-bottom: 1px solid black; } .sidebar { width: 200px; height: 50px; /* for demo only, let content control height */ float: right; clear: right; margin: 5px -50px 5px 0; /* notice the negative margin */ position: relative; background-color: white; border: 1px solid black; } .content { margin: 5px 210px 5px 5px; border: 1px solid black; height: 70px; /* for demo only, let content control height */ } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="banner"> <h1> generic header</h1> </div> <div class="sidebar"> <p>sidebar content</p> </div> <div class="sidebar"> <p>more sidebar content</p> </div> <div class="content"> <p>general content</p> </div> </div> <!-- end wrapper --> </body> </html> Code (markup): cheers, gary