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.

Affected DIV:

Home Page Template: http://www.jamesandthegiantblog.com/

Post Template: http://www.jamesandthegiantblog.com/2009/11/james-first-halloween/

TIA, Tim

2 answers


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!

Answered almost 10 years ago by tahdhaze09
Tim G. 0

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)!

Answered almost 10 years ago by Tim G.
  • Did you fix it? I just went to both pages this morning and the left main div isn't cut off anymore. tahdhaze09 almost 10 years ago