I keep a personal blog to document my son's life for distant friends and family, am running it on WordPress. On this site, the DIV that holds all of the items in the main column 'shifts' over to the left when the browser is almost done rendering the page, which cuts off the background image on the left column headers and sometimes causes items inside the main column to reflow. It only does this on my home page template -- if you go to the template for a regular post, it displays as it is supposed to. CSS that controls this DIV is the same across different templates, so I've probably introduced a problem somewhere along the way....
I've learned a lot more about CSS positioning while building this site, but cannot seem to find the cause of this issue. Any help in debugging why it does this is appreciated!
Browsers: Firefox and all Mozilla browsers I've tested it in.
Home Page Template: http://www.jamesandthegiantblog.com/
Post Template: http://www.jamesandthegiantblog.com/2009/11/james-first-halloween/
It looks like there is something in the
main_cent div that is overlapping or pushing on the
left_2 separator div that isn't doing it in the other page. As to what, I'm still trying to figure that out...
I know that when I measure the
main_left column its at 165px, not 183px. So it's being squeezed somehow by an element outside of the div. The
left_2 col rests right against it.
The only thing that may be different is the
head_bg at the top of the main page; it isn't on the other page. It has a width that is exactly the same as the column itself, so maybe between the added margin/padding and elements, its in there.
Off-topic: James looks like a very happy little boy! Very cute! And anybody that's a fan of Ore-Ida is All-righta with me!
Thanks for the kind words and the troubleshooting advice! I haven't yet figured this out, but your observations and advice are helping.
The only difference between the homepage template and the page template is that it displays multiple posts on the homepage. Something about the CSS for each post is causing that DIV to creep over to the left, and what I noticed is that the problem is incrementally worse as I increase the number of posts displayed on the page. For example, the offset to the left is worse if I am showing 10 posts, but when I adjusted it to display two, the problem was barely noticable. I am getting much closer to identifying the cause and fixing this (and learning a lot in the process)!