Hello, I have some problems with the sidebar when you open a single blog post on my blog with IE 6.0 With IE7 and firefox it's working great but if you open a page like this with IE 6.0, the sidebar will float to the bottom of the page. Cna someone help me to fix this? Thanks
Change this #sidebar float:left; font-size:0.9em; width:200px; } Code (markup): to this #sidebar float:left; font-size:0.9em; width:200px; margin-left: 540px; } Code (markup): if it doesnt work try to change 540px to 520px
Thanks for your reply. I tried it but by doing like you told me, the sidebar is floating to the bottom with every kind of browwer and not only IE 6.0
Baaaaaaad way to do it IMO and you forgot the { after the selector. margin-left:540px; just looks UGLY as hell IMO, and should only be used if you want to not set explicit widths, but since you have widths set on both columns you can float them side by side. div#content-main { float:left; width:520px; display:inline; } div#sidebar { float:left; width:200px; display:inline; } If you want it to float side by side, or you can float it right and you might have some space in between. The most important thing here to notice is that you're setting horizontal margins on content-main (html #content-main { margin-right:20px; } I think?) . Horizontal margins on floated elements in IE6 get doubled, so the 20px becomes 40 px. The way to fix this is to set the display mode to inline, which fixes it for IE only and has no effect on any other sane browser.
thanks soulscratch. I tried it but it did not work. Finally I succeeded to fix it only by reducing the width of the main content div from 520px to 505px.
This seems to be a common problem with blog templates, and one I need to fix in a few places. Thanks for the ideas guys.
You shouldn't have to reduce the width. Maybe you have an element that has a right/left margin on the left content area.. I would set it back to 520px and try troubleshooting again..