D.R.Y. code: starter master page

thanks to 456bereastreet
here is the final look

    5 <html xmlns="http://www.w3.org/1999/xhtml" >

    6 <head runat="server">

    8     <style type="text/css">    body,

    9         html {

   10             margin:0;

   11             padding:0;

   12             background:#a7a09a;

   13             color:#000;

   14         }

   15         body {

   16             min-width:750px;

   17         }

   18         #wrap {

   19             background:#99c;

   20             margin:0 auto;

   21             width:750px;

   22         }

   23         #header {

   24             background:#ddd;

   25         }

   26         #header h1 {

   27             padding:5px;

   28             margin:0;

   29         }

   30         #nav {

   31             background:#c99;

   32             padding:5px;

   33         }

   34         #nav ul{

   35             margin:0;

   36             padding:0;

   37             list-style:none;

   38         }

   39         #nav li{

   40             display:inline;

   41             margin:0;

   42             padding:0;

   43         }

   44         #main {

   45             background:#9c9;

   46             float:left;

   47             width:500px;

   48         }

   49         #main h2, #main h3, #main p {

   50             padding:0 10px;

   51         }

   52         #sidebar {

   53             background:#99c;

   54             float:right;

   55             width:240px;

   56         }

   57         #sidebar ul {

   58             margin-bottom:0;

   59         }

   60         #sidebar h3, #sidebar p {

   61             padding:0 10px 0 0;

   62         }

   63         #footer {

   64             background:#cc9;

   65             clear:both;

   66         }

   67         #footer p {

   68             padding:5px;

   69             margin:0;

   70         }

   72     </style>

   73     <asp:ContentPlaceHolder ID="head" runat="server">

   74     </asp:ContentPlaceHolder>

   75 </head>

   76 <body>

   77     <form id="form1" runat="server">

   78         <div id="wrap">

   79             <div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div>

   80             <div id="nav">

   81                 <ul>

   82                     <li><a href="#">Option 1</a></li>

   83                     <li><a href="#">Option 2</a></li>

   84                     <li><a href="#">Option 3</a></li>

   86                     <li><a href="#">Option 4</a></li>

   87                     <li><a href="#">Option 5</a></li>

   88                 </ul>

   89             </div>

   90             <div id="main">

   91                 <h2>Column 1</h2>

   92                 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

   93                 </asp:ContentPlaceHolder>

   94             </div>

   95             <div id="sidebar">

   96                 <h3>Column 2</h3>

   97                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>

   98                 <ul>

   99                     <li><a href="#">Link 1</a></li>

  100                     <li><a href="#">Link 2</a></li>

  102                     <li><a href="#">Link 3</a></li>

  103                     <li><a href="#">Link 4</a></li>

  104                     <li><a href="#">Link 5</a></li>

  105                     <li><a href="#">Link 6</a></li>

  106                 </ul>

  107             </div>

  109             <div id="footer">

  110                 <p>Footer</p>

  112             </div>

  113         </div>

  114     </form>

  115 </body>

  116 </html>

Search