Title: sidebar html / css problem
Last modified: August 19, 2016

---

# sidebar html / css problem

 *  [kix111](https://wordpress.org/support/users/kix111/)
 * (@kix111)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/sidebar-html-css-problem/)
 * i have a design like below, how can i code this, my sidebar always goes off to
   the top of my screen, i have some thing like this as html:
 * <div id=”sidebar”></div>
 * <div id=”page”>
    <div id=”header”></div> <div id=”content”></div> <div id=”footer”
   ></div> </div>
 * MY DESIGN: [http://img216.imageshack.us/my.php?image=46570628il1.jpg](http://img216.imageshack.us/my.php?image=46570628il1.jpg)
 * PROBLEM SCREENSHOT: [http://img216.imageshack.us/my.php?image=61002324gf1.jpg](http://img216.imageshack.us/my.php?image=61002324gf1.jpg)
 * thanks!

Viewing 1 replies (of 1 total)

 *  [jberghem](https://wordpress.org/support/users/jberghem/)
 * (@jberghem)
 * [17 years, 6 months ago](https://wordpress.org/support/topic/sidebar-html-css-problem/#post-863477)
 * There are several ways to solve this. In any case you should move the `<div id
   ="sidebar"></div>` inside the `<div id="page"></div>`
    Since this is a layout
   problem you mainly need to be looking at the CSS in the style.css file. In theory
   it doesn’t matter in what order the (X)HTML is. You can position everything where
   you want it with CSS. That being said there are easy ways to do things and complicated
   ways.
 * Here are the two most commonly practiced techniques to get the sidebar beside
   the content.
    1st technique: XHTML:
 *     ```
       <div id="page">
       <div id="header"></div>
       <div id="content"></div>
       <div id="sidebar"></div>
       <div id="footer"></div>
       </div>
       ```
   
 * CSS:
 *     ```
       #page {
       	width: 800px;
       	margin-top: 0px;
       	margin-right: auto;
       	margin-bottom: 0px;
       	margin-left: auto;
       }
       #content {
       	float: left;
       	width: 600px;
       	margin: 0px;
       }
       #sidebar {
       	margin: 0px;
       	width: 200px;
       }
       #footer {
       	clear: both;
       }
       ```
   
 * 2nd technique:
    XHTML:
 *     ```
       <div id="page">
       <div id="header"></div>
       <div id="sidebar"></div>
       <div id="content"></div>
       <div id="footer"></div>
       </div>
       ```
   
 * CSS:
 *     ```
       #page {
       	width: 800px;
       	margin-top: 0px;
       	margin-right: auto;
       	margin-bottom: 0px;
       	margin-left: auto;
       }
       #content {
       	width: 600px;
       	margin: 0px;
       }
       #sidebar {
       	float: right;
       	margin: 0px;
       	width: 200px;
       }
       #footer {
       	clear: both;
       }
       ```
   
 * There’s an ongoing debate which technique is the better of the two. It all depends
   on who you talk to. I personally prefer the first one.
 * If you want the header and footer to be the same width of your content instead
   of the whole width of the page, all you have to do is set the same width in the
   CSS on the `#header` and `#footer` .

Viewing 1 replies (of 1 total)

The topic ‘sidebar html / css problem’ is closed to new replies.

 * 1 reply
 * 2 participants
 * Last reply from: [jberghem](https://wordpress.org/support/users/jberghem/)
 * Last activity: [17 years, 6 months ago](https://wordpress.org/support/topic/sidebar-html-css-problem/#post-863477)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics