Title: Mocking up new Template…Issues
Last modified: August 19, 2016

---

# Mocking up new Template…Issues

 *  [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/)
 * Alright, so I’m trying to get a Theme designed. I mocked up the layout and began
   putting it together in Dreamweaver, which then I will be setting up for WordPress(
   inserting all the backend code). Well, I’m running into a weird issue at the 
   bottom of my sidebar (although it’s not in the #sidebar container). [Here’s the page](http://www.mrhensler.com/indextest.html)
 * The issue is that piece at the bottom of the sidebar that just isn’t lining up.
 * Here’s a copy of my [CSS](http://www.mrhensler.com/style.css) as well.
 * Any ideas?

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209448)
 * Nevermind…FINALLY figured it out.
 * However, now a new issue. The site alignment is WAY off in IE 8, but fine in 
   FF. What’s not cross browser compatible? I checked in it Dreamweaver, and there
   were no compatibility issues.
 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209452)
 * Most errors with IE are because of [xhtml errors](http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mrhensler.com%2Findextest.html).
 * Peter
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209458)
 * Validation errors were simply “alt” missing from my image tags and missing the
   form action. Those wouldn’t cause the alignment issues.
 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209470)
 * Oke, that was the easy shot 😉
 * Your clearing of the floats isn’t right.
    #content is supposed to be around .
   blog-content and #sidebar, but it isn’t. Try this by giving #content a red border,
   you’ll see.
 * I think you got to reevaluate the position of the clear: both;, or the way to
   put it there (I usually create an empty div).
 * Peter
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209496)
 * Hmmm…thanks. I looked over the code, and #content appears to be wrapped around
   both .blog-content and #sidebar (the divs I’m assuming, right)? I put the clear:
   both in an empty Div and it seemed to help, but not completely.
 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209507)
 * The divs are correct, but it’s the clearing that isn’t. If you put
    `border: 
   1px solid red;` in #content, then it should be around the entire post, including
   the sidebar, but now it just stays at the top, just under the header. I suggest
   you look at all elements that use floats, and see if they need clearing.
 * Peter
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209515)
 * Thanks, I never dealt a whole lot with floats so it’s all new to me….I was able
   to get the red border around the sidebar and blogcontent, but the rest of the
   alignment is off. I placed clears after each END of floated containers in it’s
   own container. Should the clears be INSIDE the div of the floating container?
   [Here’s what it looks like now](http://www.mrhensler.com/indextesttwo.html)
 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209539)
 * You have to remember that the border is created **outside** the element, so a
   1px border adds 2px to your element, both in width and height. Therefore your
   layout is gone. to compensate you would have to decrease the widths of the containers
   you’re putting the border around.
 * But forget .blog-content and #sidebar, these are alright (although .blog-content
   itself has some floats in it).
 * The clear is in the div:
 *     ```
       <div id="content">
         <div class="blog-content">blah</div>
         <div id="sidebar">blah</div>
         <div class="clear"></div>
       </div>
       ```
   
 * and the css:
 *     ```
       #content {
         width: 900;
       }
   
       .blog-content {
         width: 600;
         float: left;
       }
   
       #sidebar {
         width: 300;
         float: left;
       }
   
       .clear {
         clear: both;
       }
       ```
   
 * Peter
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209684)
 * Thanks. I tried that, and my alignment is pretty decent in IE, but there’s still
   some alignment issues. [Here is what it looks like now.](http://www.mrhensler.com/indextest3.html)
 * And here’s the code:
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Hensler's Technology Site</title>
   
       <link rel="stylesheet" href="style.css" type="text/css" />
       </head>
   
       <body>
       <div id="page">
       		<!--Insert the layout here-->
   
       <div id="header">
   
       <div id="top_nav">
       		<ul>
       			<li><a href="#"><img src="images/PNG/home.png" border="0" /></a></li>
       			<li><a href="#"><img src="images/PNG/aboutme.png" border="0" /></a></li>
                   <li><a href="#"><img src="images/PNG/resources.png" border="0" /></a></li>
                   <li><a href="#"><img src="images/PNG/contact.png" border="0" /></a></li>
       		</ul>
   
         </div>
       </div> <!--End of "header"-->
   
       <div id="content">
   
          <div class="blogcontent">
          <div class="post">
          <div class="post_title">
          <h2><a href="#">Sample Post</a></h2>
   
          <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>
   
          </div> <!--End of "post title"-->
          <!--Comments-->
          <div class="postmetadata">
          <a href="#">2</a>
   
          </div>
          <br class="space" />
   
          <div class="entry">
          <p>
          <a href="#">
   
          <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0" alt=""/>
          </a>
   
          But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
          </p>
   
          <a href="#" class="more-link">Read more &raquo;</a>
        </div> <!--End of "entry"-->
   
          </div> <!--End of "post"-->
          </div> <!--End of "blogcontent"-->
        <div id="sidebar">
       <div id="search">
          <form>
          <label class="hidden">Search for:</label>
          <div>
          <input type="text" value="" name="s" id="s" />
          <input type="submit" id="searchsubmit" value="Search" />
          </div>
          </form>
          </div> <!--End of "search"-->
          <ul>
          <li class="categories">
          <h2>Categories</h2>
          <ul>
          <li><a href="#">Lorem ipsum</a> (2)</li>
   
          <li><a href="#">Category 2</a> (1)</li>
          <li><a href="#">Sample category 3</a> (15)</li>
          </ul>
   
          </li> 
   
          <li class="pages">
          <h2>Pages</h2>
          <ul>
          <li><a href="#">Tech Ed 10</a> </li>
          </ul>
   
          </li>
   
          <li class="archives">
          <h2>Archives</h2>
          <ul>
          <li><a href="#">November 2008</a> (2)</li>
          </ul>
   
          </li>
          </ul> <!--End of sidebar's list-->
   
         </div> <!--End of "sidebar"-->
   
        <div class="bottom_sidebar">
          &nbsp;
         </div>
   
       <div class="clear"></div>
       </div> <!--End of "content"-->  
   
       <!--Begin Footer-->
   
        <div id="footer">
   
          </div>
   
       </div> <!--End of "page"-->
   
       </body>
       </html>
       ```
   
 * Here’s the CSS:
 *     ```
       @charset "utf-8";
       /* CSS Document */
   
       body
          {
          margin: 0px;
          padding: 0px;
          text-align: center;
          background-color:#585858;
          }
   
       h1, h2, h3, ul, li, p, form
          {
          margin: 0px;
          padding: 0px
          }
   
       hr
          {
          display: none;
          }
   
       a{
          text-decoration:none;
          }
   
       a:hover{
          text-decoration:underline;
          }
   
       .space
          {
          clear: both;
          }
   
       #page
          {
          margin: 0px auto;
          padding: 0;
          width: 960px;
          background-image:url(images/PNG/contentbg.png);
          background-repeat:repeat-y;
          }
   
       #header
          {
          background:#CCCCCC;
       	height: 219px;
          width: 842px;
          text-align: center;
          background-image:url(images/PNG/header.png);
          }
   
       #headerimg
          {
          margin: 0px;
          text-align: left;
          }
   
       #top_nav
          {
   
          height: 45px;
          padding-left: 65px;
          padding-top:130px;
          text-align: left;
          }
   
        #top_nav ul
          {
          list-style: none;
          }
   
          #top_nav li
          {
          display: inline;
          padding:10px;
          }
   
          #top_nav li a:hover
          {
          }
       #top_sidebar
          {
          color: #fff;
          font-weight: bold;
          height: 10px;
          padding-right: 155px;
          text-align: right;
          }
   
       #content
          {
   
          float: none ;
          text-align: left;
          border: 1px solid red;
   
          width:842px;
   
          }
   
       .blogcontent, .widecolumn
          {
          float: left;
          padding: 10px 0px;
          width: 553px;
          background-image:url(images/PNG/postbg.png);
          background-repeat:repeat-y;
          }
       .blogcontent form
          {
          color: #fff;
          padding: 10px 50px 0px 90px;
          }
        .blogcontent input
          {
          background-color: transparent;
          border: 1px solid #214b73;
          color: #fff;
          }
   
          .blogcontent #searchsubmit
          {
          background: #b1b1b1;
          color: #214b73;
          font-weight: bold;
          padding: 2px;
          }
   
          .blogcontent h2
          {
          color: #fff;
          font: bold 18px  Georgia, Arial;
          padding: 0px 50px 0px 90px;
          }
   
          .blogcontent small a
          {
          font-size: 18px;
          padding: 0px 50px 0px 90px;
          }
   
       .post
          {
          text-align: left;
          padding:0px 50px 0px 90px;
          }
   
        .post h2
          {
          padding: 0px;
          color:#fff
          }
   
        .post .post_title
          {
          float: left;
          width: 90%;
          }
   
          .post_title h2, a
          {
          padding: 0px;
          margin: 0px;
          font: Georgia, Arial;
          font-size:24px;
          color:#F90;
          }
   
          .post_title a
          {
          text-decoration: none;
          }
   
          .post_title a:hover
          {color:#FFF;
          }
   
          .post_title small
          {color: #385673;
          font: normal 12px Georgia, Arial;
   
          }
   
          .post_title small a
          {
           color: #385673;
          font: normal 12px Georgia, Arial;
          padding: 0px;
          margin: 0px;
          }
   
          .post .postmetadata
          {
          float: right;
          height: 34px;
          padding: 12px 5px;
          width: 35px;
          }
   
          .postmetadata a
          {
          text-decoration: none;
          font-size:12px;
          color:#F90;
          }
   
          .postmetadata span
          {
          padding-left:5px;
          color: #416fa3;
          font: normal 24px Georgia, Arial;
   
          }
   
       .entry
          {color: #c3c3c3;
          font: normal 12px "Times New Roman", Times, serif;
          padding: 20px 0px
          }
   
        .entry a
          {
          padding: 0px;
          margin: 0px;
          color:#F90;
          font: normal 12px "Times New Roman", Times, serif;
          }
   
          .entry a:hover
          {
       	   color:#CCC;
          }
   
          .entry blockquote
          {
          border: 2px dashed #F90;
          }
   
          .entry img
          {
          float: left;
          padding: 0px 20px 0px 0px;
   
          }
   
          .entry ul
          {padding-left:20px;
          }
   
          .entry li
          {
   
          }
   
          .entry ol li
          {
          list-style: decimal;
          } 
   
          .entry p
          {
          text-align: justify;
          padding: 0px;
          }
   
          .entry span
          {color:#FFF;
          }
   
       #sidebar
          {
   
          float: left;
          padding: 0px 0px 0px 0px;
          text-align: left;
          width: 289px;
          background-image:url(images/PNG/sidebarbg.png);
          background-repeat:repeat-y;
          }
   
          #sidebartop
          {
   
          float: left;
          padding: 0px 20px;
          text-align: left;
          width: 289px;
          background-image:url(images/PNG/sidebartop.png);
   
          }
   
        #sidebar ul
          {
          list-style: none;
          margin: 0px; padding:5px 0px 0px 0px;
   
          }
   
          #sidebar li
          {
          margin: 0px;
          margin: 0px 0px 0px 45px;
          }
   
          #sidebar li h2
          {
          margin: 0px;
          font-size:12px;
          font:normal Rockwell, Georgia, Arial;
          color:#F90;
          }
   
        #sidebar ul ul
          {
          list-style: none;
          margin: 0px;
          font-size:11px;
          font: normal Georgia, Arial;
          }
   
          #sidebar ul ul li
          {
          margin: 0px;
          font: normal 11px Georgia, Arial;
         padding:0px 0px 0px 15px;
          }
   
          #sidebar ul ul li a
          {font: normal 11px Georgia, Arial;
          text-decoration:none
          }
   
          #sidebar ul ul li a:hover
          {text-decoration:underline;
          color:#CCC;
          }
   
       .bottom_sidebar
          {
   
          float: right;
          height: 40px;
          width: 289px;
          background-image:url(images/PNG/sidebarbottomtwo.png);
          font:Georgia, Arial;
          font-size:12px;
          padding:0px 0px 0px 0px;}
   
       #search
          { padding:0px 0px 15px 35px; }
   
        #search input
          {background-color:#F90;
          color:#000;
          font:Arial, Helvetica, sans-serif;
   
        }
   
       #search #searchsubmit
          {
          background: #b1b1b1;
       }
   
       #footer
          {
          background:#999966;
          height: 34px;
          text-align: left;
          width: 842px;/*909*/
          background-image:url(images/PNG/bottomfooter.png);
          }
   
        #footer .column1
          {
          background:#FF3333;
          float: left;
       	width: 300px;
          }
   
          .column1 .bottom
          {
   
       }
   
          .column1 a
          {
          text-decoration: none;
          }
   
          #footer .column2
          {
          background-color:#006699;
          float: left;
          width: 250px;
          }
   
          .column2 h2
          {
          }
   
          .column2 ul
          {
          list-style: none;
          }
   
          .column2 a
          {
          text-decoration: none;
          }
   
       .clear {
         clear: both;
       }
       ```
   
 *  [Peter Boosten](https://wordpress.org/support/users/pboosten/)
 * (@pboosten)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209713)
 * I’m not quite sure about that bottom-sidebar. What would happen if you made that
   part of the sidebar div (and remove the float on that div)?
 * I’m not quite sure how that one behaves right now.
 * so this:
 *     ```
       </div> <!--End of "sidebar"-->
   
        <div class="bottom_sidebar">
       ```
   
 * into this:
 *     ```
       <div class="bottom_sidebar">
         </div> <!--End of "sidebar"-->
       ```
   
 * Peter
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209772)
 * Ok, so I made some modifications, and got those issues worked out. Now, I have
   another. My footer is set to fixed and 0 from the bottom. It works FINE in FF,
   but my bg image for the footer is shifted to the right in IE8.
    [ Here’s the URL…
   test it and see.
 * Here’s my CSS:
 *     ```
       @charset "utf-8";
   
       /* CSS Document */
   
       html, body {height:100%;}
   
       body
   
          {
   
          margin: 0px;
   
          padding: 0px;
   
          text-align: center;
   
          background-color:#585858;
   
          }
   
       h1, h2, h3, ul, li, p, form
   
          {
   
          margin: 0px;
   
          padding: 0px
   
          }
   
       hr
   
          {
   
          display: none;
   
          }
   
       a{
   
          text-decoration:none;
   
          }
   
       a:hover{
   
          text-decoration:underline;
   
          }
   
       .space
   
          {
   
          clear: both;
   
          }
   
       #page
   
          {
   
          margin: 0px auto;
   
          padding: 0;
   
          width: 842px;
   
          background-image:url(images/PNG/contentbg.png);
   
          background-repeat:repeat-y;
          height:100%;
   
          }
   
       #header
   
          {
   
          background:#CCCCCC;
   
       	height: 219px;
   
          width: 842px;
   
          text-align: center;
   
          background-image:url(images/PNG/header.png);
   
          }
   
       #headerimg
   
          {
   
          margin: 0px;
   
          text-align: left;
   
          }
   
       #top_nav
   
          {
   
          height: 45px;
   
          padding-left: 65px;
   
          padding-top:130px;
   
          text-align: left;
   
          }
   
        #top_nav ul
   
          {
   
          list-style: none;
   
          }
   
          #top_nav li
   
          {
   
          display: inline;
   
          padding:10px;
   
          }
   
          #top_nav li a:hover
   
          {
   
          }
   
       #top_sidebar
   
          {
   
          color: #fff;
   
          font-weight: bold;
   
          height: 10px;
   
          padding-right: 155px;
   
          text-align: right;
   
          }
   
       #content
   
          {
   
          float: none ;
   
          text-align: left;
   
          width:842px;
         height:100%;
   
          }
   
       .blogcontent, .widecolumn
   
          {
   
          float: left;
   
          padding: 10px 0px;
   
          width: 553px;
   
          background-image:url(images/PNG/postbg.png);
   
          background-repeat:repeat-y;
          height:100%;
          overflow:visible;
   
          }
   
       .blogcontent form
   
          {
   
          color: #fff;
   
          padding: 10px 50px 0px 90px;
   
          }
   
        .blogcontent input
   
          {
   
          background-color: transparent;
   
          border: 1px solid #214b73;
   
          color: #fff;
   
          }
   
          .blogcontent #searchsubmit
   
          {
   
          background: #b1b1b1;
   
          color: #214b73;
   
          font-weight: bold;
   
          padding: 2px;
   
          }
   
          .blogcontent h2
   
          {
   
          color: #fff;
   
          font: bold 18px  Georgia, Arial;
   
          padding: 0px 50px 0px 90px;
   
          }
   
          .blogcontent small a
   
          {
   
          font-size: 18px;
   
          padding: 0px 50px 0px 90px;
   
          }
   
       .post
   
          {
   
          text-align: left;
   
          padding:0px 50px 0px 90px;
   
          }
   
        .post h2
   
          {
   
          padding: 0px;
   
          color:#fff
   
          }
   
        .post .post_title
   
          {
   
          float: left;
   
          width: 90%;
   
          }
   
          .post_title h2, a
   
          {
   
          padding: 0px;
   
          margin: 0px;
   
          font: Georgia, Arial;
   
          font-size:24px;
   
          color:#F90;
   
          }
   
          .post_title a
   
          {
   
          text-decoration: none;
   
          }
   
          .post_title a:hover
   
          {color:#FF9900;
   
          }
   
          .post_title small
   
          {color: #FFFFFF;
   
          font: normal 12px Georgia, Arial;
   
          }
   
          .post_title small a
   
          {
   
           color: #FFFFFF;
   
          font: normal 12px Georgia, Arial;
   
          padding: 0px;
   
          margin: 0px;
   
          }
   
          .post .postmetadata
   
          {
   
          float: right;
   
          height: 15px;
   
          padding: 12px 5px;
   
          width: 35px;
   
          }
   
          .postmetadata a
   
          {
   
          text-decoration: none;
   
          font-size:12px;
   
          color:#F90;
   
          }
   
          .postmetadata span
   
          {
   
          padding-left:5px;
   
          color: #416fa3;
   
          font: normal 24px Georgia, Arial;
   
          }
   
       .entry
   
          {color: #c3c3c3;
   
          font: normal 12px "Times New Roman", Times, serif;
   
          padding: 20px 0px
   
          }
   
        .entry a
   
          {
   
          padding: 0px;
   
          margin: 0px;
   
          color:#F90;
   
          font: normal 12px "Times New Roman", Times, serif;
   
          }
   
          .entry a:hover
   
          {
   
       	   color:#CCC;
   
          }
   
          .entry blockquote
   
          {
   
          border: 2px dashed #F90;
   
          }
   
          .entry img
   
          {
   
          float: left;
   
          padding: 0px 20px 0px 0px;
   
          }
   
          .entry ul
   
          {padding-left:20px;
   
          }
   
          .entry li
   
          {
   
          }
   
          .entry ol li
   
          {
   
          list-style: decimal;
   
          } 
   
          .entry p
   
          {
   
          text-align: justify;
   
          padding: 0px;
   
          }
   
          .entry span
   
          {color:#FFF;
   
          }
   
       #sidebar
   
          {
   
          float: left;
   
          padding: 0px 0px 0px 0px;
   
          text-align: left;
   
          width: 289px;
   
          background-image:url(images/PNG/sidebarbg.png);
   
          background-repeat:repeat-y;
   
          }
   
        .belowsidebar
   
        {width:289px;
        height:49px;
        background-image:url(images/PNG/belowsidebarbg.png);
        background-repeat:repeat-y;
        }
   
          .sidebartop
   
          {
   
          float: left;
   
          padding: 0px 0px 0px 0px ;
   
          text-align: left;
   
          width: 289px;
          height:44px;
   
          background-image:url(images/PNG/sidebartoptwo.png);
   
          }
   
        #sidebar ul
   
          {
   
          list-style: none;
   
          margin: 0px; padding:5px 0px 0px 0px;
   
          }
   
          #sidebar li
   
          {
   
          margin: 0px;
   
          margin: 0px 0px 0px 70px;
   
          }
   
          #sidebar li h2
   
          {
   
          margin: 0px;
   
          font-size:14px;
   
          font:normal Arial, Helvetica, sans-serif;
   
          color:#FFF;
   
          }
   
        #sidebar ul ul
   
          {
   
          list-style: none;
   
          margin: 0px;
   
          font-size:11px;
   
          font: normal Georgia, Arial; 
   
          }
   
          #sidebar ul ul li
   
          {
   
          margin: 0px;
   
          font: normal 11px Georgia, Arial;
   
         padding:0px 0px 0px 15px;
   
          }
   
          #sidebar ul ul li a
   
          {font: normal 11px Georgia, Arial;
   
          text-decoration:none
   
          }
   
          #sidebar ul ul li a:hover
   
          {text-decoration:underline;
   
          color:#CCC;
   
          }
   
       .bottom_sidebar
   
          {
   
          float: right;
   
          height: 40px;
   
          width: 289px;
   
          background-image:url(images/PNG/sidebarbottomtwo.png);
   
          font:Georgia, Arial;
   
          font-size:12px;
   
          padding:0px 0px 0px 0px;}
   
       #search
   
          { padding:0px 0px 0px 0px; }
   
        #search input
   
          {background-color:#F90;
   
          color:#000;
   
          font:Arial, Helvetica, sans-serif;
   
        }
   
       #search #searchsubmit
   
          {
   
          background:#3c3c3c;
          border:1px solid #FF9900;
          font:Arial, Helvetica, sans-serif;
          font-weight:500;
          color:#FFFFFF
   
       }
   
       #footer
   
          {
   
          height: 34px;
   
          text-align: left;
   
          width: 842px;/*909*/
   
          background-image:url(images/PNG/footertab.png);
   
          position:fixed;
          bottom:0;
   
          }
   
        #footer .column1
   
          {
   
          background:#FF3333;
   
          float: left;
   
       	width: 300px;
       	text-align:center;
   
          }
   
          .column1 .bottom
   
          {
   
       }
   
          .column1 a
   
          {
   
          text-decoration: none;
   
          }
   
          #footer .column2
   
          {
   
          background-color:#006699;
   
        float: left;
          width: 250px;
   
          }
   
          .column2 h2
   
          {
   
          }
   
          .column2 ul
   
          {
   
          list-style: none;
   
          }
   
          .column2 a
   
          {
   
          text-decoration: none;
   
          }
   
       .clear {
   
         clear: both;
   
       }
   
       .footertext {color:#FF9900;
       font:Arial, Helvetica, sans-serif;
       font-weight:600;
       font-size:12px;
       padding-top:15px;
   
       }
       ```
   
 * Here’s the HTML:
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
       <html xmlns="http://www.w3.org/1999/xhtml">
   
       <head>
   
       <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
       <title>Hensler's Technology Site</title>
   
       <link rel="stylesheet" href="style.css" type="text/css" />
   
       </head>
   
       <body>
   
       <div id="page">
   
       		<!--Insert the layout here-->
   
       <div id="header">
   
       <div id="top_nav">
   
       		<ul>
   
       			<li><a href="#"><img src="images/PNG/home.png" border="0" /></a></li>
   
       			<li><a href="#"><img src="images/PNG/aboutme.png" border="0" /></a></li>
   
                   <li><a href="#"><img src="images/PNG/resources.png" border="0" /></a></li>
   
                   <li><a href="#"><img src="images/PNG/contact.png" border="0" /></a></li>
   
       		</ul>
   
         </div> 
   
       </div> <!--End of "header"-->
   
       <div id="content">
   
          <div class="blogcontent">
   
          <div class="post">
   
          <div class="post_title">
   
          <h2><a href="#">Sample Post</a></h2>
   
          <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>
   
          </div> <!--End of "post title"-->
   
          <!--Comments-->
   
          <div class="postmetadata">
   
          <a href="#">2</a>
   
          </div>
   
          <br class="space" />
   
          <div class="entry">
   
          <p>
   
          <a href="#">
   
          </a>
   
          But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
   
          </p>
   
          <a href="#" class="more-link">Read more &raquo;</a>
   
        </div> <!--End of "entry"-->
   
          </div> <!--End of "post"-->
   
       </div> <!--End of "blogcontent"-->  
   
        <div id="search">
   
          <form>
   
          <div>
   
          <input type="text" value="" name="s" id="s" />
   
          <input type="submit" src="images/PNG/search.png" id="searchsubmit" value="Search"  />
   
          </div>
   
          </form>
   
          </div> <!--End of "search"-->
   
        <div class="sidebartop"></div>
        <div id="sidebar">
   
          <ul>
   
          <li class="categories">
   
          <h2>Categories</h2>
   
          <ul>
   
          <li><a href="#">Lorem ipsum</a> (2)</li>
   
          <li><a href="#">Category 2</a> (1)</li>
   
          <li><a href="#">Sample category 3</a> (15)</li>
   
          </ul>
   
          </li> 
   
          <li class="pages">
   
          <h2>Pages</h2>
   
          <ul>
   
          <li><a href="#">Tech Ed 10</a> </li>
   
          </ul>
   
          </li>
   
          <li class="archives">
   
          <h2>Archives</h2>
   
          <ul>
   
          <li><a href="#">November 2008</a> (2)</li>
   
          </ul>
   
          </li>
   
          </ul> <!--End of sidebar's list-->
   
         <div class="bottom_sidebar">
   
         </div> 
   
         </div> <!--End of "sidebar"-->
   
       <div class="clear"></div>
   
       </div> <!--End of "content"-->  
   
       <!--Begin Footer-->
   
        <div id="footer">
   
       <p align="center" class="footertext">Copyright 2009 Mr.Hensler </p>
   
          </div>
   
       </div> <!--End of "page"-->
   
       </body>
   
       </html>
       ```
   

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Mocking up new Template…Issues’ is closed to new replies.

 * 11 replies
 * 2 participants
 * Last reply from: [mhensler](https://wordpress.org/support/users/mhensler/)
 * Last activity: [16 years, 8 months ago](https://wordpress.org/support/topic/mocking-up-new-templateissues/#post-1209772)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics