As of version 2.8, the on-board editor in WordPress caused me to spend a whole week of my life tearing my hair out over the layout of my WordPress pages. You see, my transition onto wordpress as a web design and blogging tool came about after I created the first www.artbyherbie.com website. I had been using DW for a few years now and was confident in it’s use. This was a ‘static’ website with HTML pages linked through a homepage. The layout was rather ‘creative’ because I chose to create a long wall ‘footer’ graphic which spanned the page edge-to-edge, with three areas above it to house the content and navigation. Anyways, more can be read about the first site here.

Therefore, when I came across the TinyMCE editor within WordPress, I wanted the same control over layout and formatting as DW gave me. The onboard editor would re-arrange HTML so that elements would not appear correctly. It’s a standard feature on wordpress which seems to add various <p></p> tags to your code and generally ‘shuffles it around’(!) More about this further on down. So I, decided to create my pages in DW, and copy and paste the relevant HTML code into the ‘Edit Page’ area in the WordPress Dashboard. It was the start of a VERY frustrating week.. here’s the highlights ;)

PS: Another important reason why I opted to use Dreamweaver to create my wordpress pages was because, as you can see from many pages on this weblog, there are TWO sidebars on the right. One with the various widgets, and the other narrower grey one next to it. See? OK.

The theme I chose for my weblog only came with one sidebar. Hmm. I needed a second ‘non widgetised’ grey column that would act like a second sidebar. In this I would add various links, text and images, or whatever else I wanted. However, editing my theme to create a second sidebar was a bit too tampering, lets say. It meant editing such files as functions.php, index.php and creating other files. I like to keep my themes php as standard as possible, and only add to it if necessary. Anyways, I only wanted this sidebar to show up on my pages, and disappear on my posts. So I opted to merge the sidebar into each one of my pages. The ‘technical journey’, started with tables:

Using Dreamweaver Tables to Layout WordPress Pages
The page contents would fit snugly within the content area, which was about 650px wide, of my theme and screen. So I proceeded to create a table consisting of three columns, with a total width of 630px. I divided the column lengths 500px for the content area, 20px for whitespace and 110px for the grey sidebar. Yaay, I thought. Easy. So I added the content for the homepage and the associated images. Spaced everything nicely, previewed it in IE and FF, validated the code. Leaving out the doctype and meta tags, I copied the content markup and pasted it into the WP editor. After updating the page, I viewed it and well, the results looked good in Firefox. However, in Internet Explorer, the column widths had changed and the text and images were not aligned properly. I huffed a bit, and puffed a lot and started searching for an answer. The problem was with the way IE formatted table spacing, it was a browser error. So the tables approach was slung out the window.  Somebody suggested using AP DIVs in DW because they were ‘cross-browser friendly’ and faster loading, apparently(!)

Using AP DIVS and CSS to Layout WordPress Pages
So I did. Straight into DW, Insert> Layout Objects> AP Div>. I edited the CSS rule so it had a 0px top and left, 500px width and transparent background. (AP means ‘absolutely positioned’ by the way). I added a second ap div with width 110px, background colour light grey and a left-margin of 15px to act like whitespace. ‘There’, I thought, ‘..that’ll fit snugly within the content area of my WP theme’. Well, not really, everything that was supposed to show within the page content area of my theme was overlaying everything else to the upmost left and top of my screen. Hmm, I thought – very strange.

Using DIVS and CSS to Layout WordPress Pages
After some serious head scratching, room pacing and screaming at my monitor screens, I was still lost. So I turned to the wordpress.org forums. I’ve always been a fan of online forums because Ive learned so much from other people over the years, so I put my dilemma to the wordpress. org gang. Here’s the link to the thread:

http://wordpress.org/support/topic/344212?replies=14

After trying a couple of suggestions and still seeming more lost than a fish in a desert, I submitted another thread, this time with the title ‘WHAT THE HELL IS GOING ON?’ It’s true, I was at my wits end with these div tags and it seemed I was getting nowhere. This seemed to get people’s attention and before no time, I returned to see a couple of helpful suggestions from professional coders. Here’s the second forum post:

http://wordpress.org/support/topic/344622?replies=11

I met a nice person with username alaetra (I’m ashamed to say I still didn’t catch the gender of him/her. sorry, alaetra!). He/she replied that the reason my page layout was overlaying my theme was because I was using absolute positioning in my divs. This was causing the HTML to override my wordpress theme and displaying the page contents to the left of the page instead of within the allocated content area of my theme. She recommended I use divs that were relatively positioned instead, and to float my divs to the left, also.

I did as she said and started over. This time however, I created a container div which housed everything else within it. I styled all the divs using CSS and arranged the layout precisely, making the content area div have a height of ‘auto’ so it adjusted to its contents only. I also gave the container div a height of ‘auto’.

I then added all my content, such as the six graphics on the homepage, saved it in Dreamweaver, copied and pasted the code, deleted the doctype etc that I didnt need and updated my WordPress page. WHAM! There it was, perfectly aligned, exactly how i wanted. All my pages used this template and I am ever so thankful to the wordpress.org forum members who helped me with this little ‘bug’, I would say.

Your’s ‘originally’,
Herbie Hysteria

It only takes a click, please share this page with your friends, colleagues, customers, lovers, parents, teachers and pets(!)

• 

Related posts:

1. Facebook Pages – My New Welcome Tab and How You Can Get Yours
2. How To Automatically Update Your Facebook, Twitter and Myspace Profiles via Your WordPress blog
3. Out With The Old, In With The New
4. Adding Meta Tags To A WordPress Blog
5. WordPress – Comments box not showing up on pages?