Sidebar aligns to bottom in IE, but not Firefox

Maybe the simplest way is:
#content, #sidebar{overflow:hidden}

Hmmm, I pulled this out of the style sheet:

/**********************************************
* Structure: Content, Sidebar, etc. *
***********************************************/

#outline {
width: 855px;
margin: 0 auto;
padding: 0;
background: #fff;
font-size: 1.3em;
}

Is there an “align to top” code I can insert here?

Can anyone viewing this page advise which code I might edit to resolve the display errors in Internet Explorer?

I just discovered this problem on a corporate blog I just launched for my company (https://blog.friartux.com). The problem was the image size of images in the main body, which made the main body column too wide.

When I load individual posts of yours that contain smaller images (e.g. “Notes on Religion”), the sidebar loads at the top at first, but then IE throws it to the bottom.

My guess is that you’ve set the width too wide for the column containing your posts. Based on some of the photos you use, you probably have this column set to 500px wide or wider, or you have padding in place that’s messing stuff up. Try looking for width or padding/margin tags that pertain to this column.

Hi, I am also having issues with the way my site appears in IE and Firefox. Initially, I had missing text in IE on the front page sidebar and main content but managed to fix it by copying and pasting the text into notepad and back again, but now I am have two more problems that I can’t work out how to solve:
1. My sidebar is not aligning with the pages in FF. I tried making the changes to the stylesheet as per above, but it didn’t seem to help. I realise I have a range of errors (as per the validator) but I can’t work out how to fix them (ie. I don’t know where these errors are located – the first ones, at least, are not in my stylesheet).
2. The text in my tables in IE is weirdly large. I tried cutting and pasting in from notepad, but that hasn’t helped. It’s not a big deal, but is a bit odd.
Neither of these issues are deal-breakers but they look rubbish so I would be most grateful for tips on how to address them.
FYI, my site is: https://www.jewishhistoryinonehour.com
Thanks in advance.

I have exactly the same issue in anything below IE7 but it was already an issue in the template before I modified it. This is the theme in question, as you can see in the comments others have had that issue too: https://topwpthemes.com/coolmist-wordpress-theme/

I managed to reduced the number of errors from 66 to 10 on my site (didn’t have a clue about how to remove the last 10 which didn’t seem to relate to anything that actually existed) but I couldn’t sort this problem out. Now, weirdly, I have 29 errors, but the issue has gone away. I am confused, but if it is working…it’s working, so I won’t complain! I would still love to know about why my table looks so weird in IE, but can live with the mystery if need be.

Oh my, just as I posted this, the problem came back! Someone is playing with me…

gather round folks! I’m going to explain this phenomenon.. track closely..

it’s all about width’s and margin’s. Width’s, when defined, have to fit into the area’s their crammed into, and you hafta +the margin’s. So if you have a #div (content) defined at, say, 500px, and a margin on the left of 10px, and on the right of 20px, your div (content) is effectively 530px wide. If your sidebar (cumulative) is 210px wide, and you are trying to cram them both into a div (wrapper) which is only 710px wide it’s going to drop the sidebar below.. plain and simple… now you can tweak certain aspects to make it NOT do so such as overflow:hidden, but that is solving the product of the problem and not the problem itself.. which means you’ve created more problems to solve..

another thing- i.e. does NOT like negative margins.. use them at your own bemusement. they trip out poor hapless i.e. and give inconsistent results..

specific to the original posters problem:

Your header.php (guesing thats what it’s called in that theme) does something a lot of themes do for some reason.. they open a #wrapper which contains the #header and then close it. dunno why because it wrecks the entire object of having a wrapper imHo.. This is what I say do about it:

create a NEW div. call it whatever, I will call it #bigasscontainer for speaking terms.. define that #bigasscontainer in your css with a defined width- say 800px or whatever will effectively hold ALL of you pages content, with sidebars side-by-side.. Then (and this is the tricky part- not really, but think about how much sense this makes) from that point forward never define a #div with an absolute width again! Use only percentages. example:

#bigasscontainer { width:800px; margin:auto; /*centers it for you*/}
#content {width:65%; float:left; margin:0; margin-right:10px;}
#sidebar {width:20%; float:right; margin:0; margin-left:10px;}

that is a basics for a page with a right floated sidebar.. no negative margins, and widths that will fit. The issues with dropping sidebars almost always leads back to a width problem. If it’s not that it is a unclosed div issue. ( missing /div)… by the way, if you use the #bigasscontainer method I am suggesting, remember to go to your footer.php and add an additional /div at the end!

hopefully this helps ‘yall! merry coding!

afterthought: remember this too: POP Quiz! if you have a #div 500px wide, and 20px margin on the right, and a adjacent (visually) #div 200px wide with a 35px left margin, how wide is that div? These things are important! It would be 735px wide.. ‘Yall see how that works?

Hey drewactual, thanks so much for your response. I went through it but I think it is not going to help me as I am dealing with a number of pages (and not a series of posts) – each of varying lengths, so from what I can see, changing widths and margins will only help individual pages rather than all of them. I checked and I have overflow:hidden already in there. Hmmmm… Here’s my site again should you wish to take a look. Cheers.

the first thing I see about your page that will create you issues is this: inline css.. I use it too, but it will cause you grief if you forget about it.. I would consider eliminating it and working off of but one css (style.css) if it was me..

the second thing is this: you have all kinds of declarations to tell elements inside of your #content what to do (i.e. #content a:, #content ul ect..) but you have no declaration set for the div itself.. for instance, just to play go to the absolute bottom of your style.css and add:
#content {min-height:1000px;}
and see what happens.

If you use the #bigasswrapper method, you can set the background to #fff like your post area and eliminate this problem.. But that is but one.

I highly rec you dump the inline css- remember, css is like a private in the army- it does exactly what it was last told to do.. some browsers are going to do it right and read accordingly, others are going to trip all over themselves and give inconsistent results.. the best thing to do is consolidate ALL css in one file, unless you have real need to do something different on but one page..

I also rec you set the width absolute but one time when talking about containing divs, and use percentages each subsequent time, like I mentioned before. overflow: hidden; is in most cases when used in a div is reaction to a problem, and will create problems of itself..

just my opinion guys..

??

And a good one. Amazing how some people don’t understand that inline CSS over-rules any statement in styles.css – or any other style sheet.

Thanks so much for your response drewactual. I will look into my inline css. To be honest, I am not exactly sure yet what that means, but I am now going off to Google it! While not a total newbie, I am still learning… everytime I think I have it figured and can relax a little, I realise I haven’t and it’s time to take another deep breath and try again ?? Also, I have decided to kill my tables and replace them with graphics…thus eliminating two validation errors! Yay! Thanks again.

fwiw- inline css is style set from inside the page, not pointing to an external file such as your style.css.

it can sure confuse matters if you forget it is there.