Title: CSS coding help – html mock up
Last modified: August 19, 2016

---

# CSS coding help – html mock up

 *  [mrzerouk](https://wordpress.org/support/users/mrzerouk/)
 * (@mrzerouk)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/css-coding-help-html-mock-up/)
 * Please excuse first post errors if I make any.
 * I have been following the theme creation guide at
    [http://designreviver.com/tutorials/premium-wordpress-theme-design-part-2-html-css-wordpress-theme-files/](http://designreviver.com/tutorials/premium-wordpress-theme-design-part-2-html-css-wordpress-theme-files/)
 * I’ve got a nice design in .psd and began working on the style css and html mock
   up. Got almost to the end when I ran into trouble and a problem I can’t manage
   to figure out.
    The repeating section of my sidebar is misalinged with the top
   of the sidebar in the header and the foot of the sidebar. Tried everything I 
   can think of to get the bits to line up but with no success. My style sheet code
   is ‘body { background: #000000 url(‘./images/jpgs/background.jpg’) fixed no-repeat
   bottom center; margin: 0px; padding: 0px; text-align: center; }
 * 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: 959px; }
 * #header
    { background: url(‘./images/pngs/images/header959x308.png’) no-repeat
   top left; height: 308px; width: 959px; text-align: center; }
 * #headerimg
    { height: 185px; margin: 0px; padding: 0px 0px 0px 45px; text-align:
   left; }
 * #top_nav
    { height: 45px; padding-left: 70px; text-align: left; }
 *  #top_nav ul
    { list-style: none; }
 *  #top_nav li
    { display: inline; }
 *  #top_nav li a:hover
    { background:url(‘./images/pngs/images/hover.png’) no-repeat
   bottom center; } #top_sidebar { color: #fff; font-weight: bold; height: 10px;
   padding-right: 155px; text-align: right; } #content { background: url(‘./images/
   pngs/images/cont621x20.png’) repeat-y top left; float: left; text-align: left;
 *  }
 * .blogcontent, .widecolumn
    { float: left; padding: 10px 0px; width: 635px; } .
   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
    { padding: 0px 50px 0px 90px; text-align: left; }
 *  .post h2
    { color: #fff; padding: 0px; }
 *  .post .post_title
    { float: left; width: 90%; }
 *  .post_title h2, a
    { color: #b31414; font: normal 24px Georgia, Arial; padding:
   0px; margin: 0px; }
 *  .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
    { background: url(‘./images/pngs/images/bg-45×58.png’) 
   no-repeat top left; float: right; height: 34px; padding: 12px 10px; width: 25px;}
 *  .postmetadata a
    { color: #416fa3; text-decoration: none; }
 *  .postmetadata span
    { color: #416fa3; font: normal 24px Georgia, Arial; padding-
   left:5px; }
 * .entry
    { color: #c3c3c3; font: normal 12px Arial; padding: 20px 0px; }
 *  .entry a
    { color: #385673; font: normal 12px Georgia, Arial; padding: 0px; 
   margin: 0px; }
 *  .entry a:hover
    { color: #69c; }
 *  .entry blockquote
    { border: 2px dashed #042748; padding: 8px; }
 *  .entry img
    { float: left; padding: 0px 20px 0px 0px }
 *  .entry ul
    { padding-left: 20px }
 *  .entry li
    { list-style: url(‘./images/pngs/images/bull-list.png’); }
 *  .entry ol li
    { list-style: decimal; }
 *  .entry p
    { text-align: justify; padding: 0px; }
 *  .entry span
    { color: #b31414; }
 * #sidebar
    { background: url(‘./images/pngs/images/sidecont338x20.png’) repeat-
   y top left; float: left; padding: 0px 20px; text-align: left; width: 285px; }
 *  #sidebar ul
    { list-style: none; margin: 0px; padding: 5px 0px }
 *  #sidebar li
    { margin: 0px; padding: 0px 0px 0px 20px; }
 *  #sidebar li h2
    { color: #fff; font: normal 18px Rockwell, Georgia, Arial; margin:
   0px; padding: 10px 0px; }
 *  #sidebar ul ul
    { list-style: none; margin: 0px; }
 *  #sidebar ul ul li
    { margin: 0px; padding: 0px 0px 0px 30px; }
 *  #sidebar ul ul li a
    { color: #69c; font: normal 12px Arial; text-decoration:
   none; }
 *  #sidebar ul ul li a:hover
    { color: #b31414; }
 * .bottom_sidebar
    { background: no-repeat bottom center; float: right; padding:
   0px 0px 0px 15px; height: 32px; text-align: left; width: 338px; } .post .postmetadata{
   background: url(‘./images/pngs/images/bg-45×58.png’) no-repeat top left; float:
   right; height: 34px; padding: 12px 10px; width: 25px;} #search { font: bold 12px
   Arial; color: #fff; padding: 0px 0px 5px 5px; }
 *  #search input
    { background-color: transparent; border: 1px solid #214b73; color:#
   fff; }
 * #search #searchsubmit
    { background:#0B192C; color: #FFFFFF; font-weight: bold;
   padding: 0px; }
 * #footer
    { background: url(‘./images/pngs/images/footer959x194.png’) no-repeat
   top left; color: #fff; height: 194px; text-align: left;
 *  width: 959px;
    }
 *  #footer .column1
    { float: left; font: normal 10px Arial; padding: 0px 0px 0px
   80px; width: 300px; }
 *  .column1 .bottom
    { padding: 50px 0px 0px 40px; }
 *  .column1 a
    { color: #fff; font: normal 12px Arial; text-decoration: none; }
 *  #footer .column2
    { float: left; font: normal 12px Arial; padding: 35px 0px 
   0px 0px; width: 250px; }
 *  .column2 h2
    { color: #457db9; font: normal 20px Rockwell; }
 *  .column2 ul
    { list-style: none; }
 *  .column2 a
    { color: #fff; font: normal 12px Arial; text-decoration: none; }’
 * And my html file is
 * <html>
    <head> <title>American Gospels</title> <link rel=”stylesheet” href=”style.
   css” type=”text/css” media=”screen” /> </head> <body> <div id=”page”>
 * <div id=”header”>
    <div id=”headerimg”> [<img alt+”American Gospels” border=”0″ src=”./images/pngs/images/logo698x246.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   </div>
 *  <div id=”top_nav”>
    - [<img alt=”Home” border=”0″ src=”./images/pngs/images/home80x38.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
    - [<img alt=”About” border=”0″ src=”./images/pngs/images/about77x38.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
    - [<img alt=”Room 17″ border=”0″ src=”./images/pngs/images/room1793x38.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
    - [<img alt=”PJM Publishing” border=”0″ src=”./images/pngs/images/pjmpub178x38.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
    - [<img alt=”Contact” border=”0″ src=”./images/pngs/images/contact99x38.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
 *  </div>
 * </div> <!–End of “header”–>
    <div id=”content”>
 *  <div class=”blogcontent”>
    <div class=”post”> <div class=”post_title”> <h2>[Sample Post](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   </h2>
 *  <small>November 2nd, 2008 | by admin | [Lorem ipsum](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   | [Category 1](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   | [Uncategorized](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   </small>
 *  </div> <!–End of “post title”–>
    <div class=”postmetadata”> <!–Comments–>
 *  [2](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
 *  </div>
    <br class=”space” />
 *  <div class=”entry”>
    <p> [](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
 *  <img class=”alignleft” title=”pic-02″ src=”images/jpgs/pic-01.jpg” border=”0″
   alt=””/>
 *  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 [pleasure](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   itself, because it is pleasure, but because those who do not know how to pursue
   pleasure rationally encounter consequences that are extremely painful.
    </p>
 *  [Read more »](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   
   </p> </div> <!–End of “entry”–>
 *  </div> <!–End of “post”–>
    </div> <!–End of “blogcontent”–> <div id=”sidebar”
   >
    -  <li class=”categories”>
       <h2>Categories</h2>
 *  - [Lorem ipsum](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)(
      2)
    - [Category 2](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)(
      1)
    - [Sample category 3](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)(
      15)
 *  <li class=”archives”>
    <h2>Archives</h2>
    - [November 2008](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)(
      2)
 *  <li class=”linkcat”>
    <h2>Blogroll</h2> <ul class=’xoxo blogroll’>
    - [Development Blog](http://wordpress.org/development/)
    - [Themes](http://wordpress.org/extend/themes/)
    - [WordPress Planet](http://planet.wordpress.org/)
    -  <!–End of sidebar’s list–>
    -  <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”–>
    -  </div> <!–End of “sidebar”–>
    -  <div class=”bottom_sidebar”>
       [<img alt=”0″ border=”0″ src=”./images/pngs/images/rss338x126.png” />](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
      </div> </div> <!–End of “content”–> <br style=”clear: both;” />
    -  <div id=”footer”>
       <div class=”column1″> Author
    -  [Author’s link](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
      
      [License](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
      <div class=”bottom”> <img alt=”” border=”0″ src=”./images/pngs/images/creator205x71.
      png” /> </div> </div> <div class=”column2″> <h2>Recent posts</h2>
 *  - [Sample post](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
    - [Lorem Ipsum Dolor Sit Amet](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
 *  </div>
 *  <div class=”column2″>
    <h2>Pages</h2>
    - [About](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
 *  </div>
    </div> </div> <!–End of “page”–></body> </html>’
 * Am I missing anything really obvious? Not got any real knowledge of CSS (or html
   for that matter) but am trying to pick it up as I go along so nothing too technical
   please.

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

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/css-coding-help-html-mock-up/#post-1245125)
 * Please don’t post huge chunks of code here. For larger blocks of code, use the
   [WordPress pastebin](http://wordpress.pastebin.ca/). It makes life easier for
   everyone. In this case, a link to your site would be helpful.
 *  [Toy](https://wordpress.org/support/users/toyvalentine/)
 * (@toyvalentine)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/css-coding-help-html-mock-up/#post-1245411)
 * I know this was posted a long time ago but hopefully this might help somebody
   as I was having the same problem.
 * After following the tutorial, I could not get the repeating sections to line 
   up with my header and footer, only by a tiny amount but enough to notice.
 * When messing around with the html/css didn’t help, I thought the problem might
   be with my cropping in Photoshop, not the code as I think that some of the inside
   guides aren’t 100% accurate.
 * Instead of cropping each section individually, choose a large header section 
   with a width of 960 but a height all the way down to the bottom of the side bar.
 * Crop down to get your repeating content box section, cropping only from the inside
   edge (so the left hand side for the content box and the right hand side for the
   sidebar). Then step backwards and repeat for the sidebar repeating section and
   then again for the bottom sidebar section, always starting from your original
   large header section.
 * You should always go by the 960 guide lines as these seem to be accurate.
 * I hope this makes sense- it worked for me, anyway.
 * Also, while I am extremely new to working properly with html & css, I believe
   that there is a close div tag missing from the included html as I could not get
   my repeating content box section to stop repeating, all the way to the bottom
   of the page.
 * Changing the <div class=bottom_sidebar”> section to the code beneath seemed to
   fix this.
 *  <div class=”bottom_sidebar”> [<img alt=”0″ border=”0″ src=”./images/pngs/rss.png”>](https://wordpress.org/support/topic/css-coding-help-html-mock-up/?output_format=md#)
   </div></div><!–End of “content”–>
 * Not sure if this matters for the html-WordPress section as I haven’t got that
   far yet but I spent ages trying to figure out what it was (newbie that I am) 
   so this may save someone else some time!

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

The topic ‘CSS coding help – html mock up’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [misaligned](https://wordpress.org/support/topic-tag/misaligned/)
 * [scratch](https://wordpress.org/support/topic-tag/scratch/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)

 * 2 replies
 * 3 participants
 * Last reply from: [Toy](https://wordpress.org/support/users/toyvalentine/)
 * Last activity: [16 years, 4 months ago](https://wordpress.org/support/topic/css-coding-help-html-mock-up/#post-1245411)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics