Fixing Internet Explorer (IE) Sidebar Float Drop Problem in Blogger

Monday, February 23, 2009

I didn't realize the IE Sidebar float drop problem for my blogger template for months, after which it came to notice accidentally when I was doing a browser compatibility check for posts on my blog. There is no right sidebar in IE (yes it dropped down), although it had enough space on the right for that sidebar to float, also I could see the right sidebar in Firefox and Chrome, then realized that its a problem specific to IE, the sidebar float drops and I made a minor code change in my template to fix it, which we will see below.

As a first practice, I was checking the solution with Google for a quick fix, but my blog is not a fixed width one, therefore some solutions did't prove fruitful to me, then I decided to explore the possible ways the left and right sidebars can float and one of that combination clicked.

For this example, we will a sample three column template from here, since in my case the sidebars and the post section are not fixed width, my template code for sidebar, main-wrapper and content-wrapper looks like the below one (this blog used this template code before the IE sidebar float drop fix).

Listing 1: Blogger code snippet for my post and sidebars (before fixing the IE Sidebar float drop problem)
#content-wrapper {
width: 98%;
margin: 0 1%;
padding: 0;
text-align: left;
background-color: $mainBgColor;
border: 1px;
border-top: 0;
}

#main-wrapper {
width: 66%;
float: left;
margin: 0 1%;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar-wrapper {
width: 16%;
float: left;
margin:0 auto 0;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
For your understanding in the above CSS declaration,

#content-wrapper - wraps the post and the sidebar sections
#main-wrapper - wraps the post section
#sidebar-wrapper - wraps the sidebar (left and right sidebars)

As you see from the above CSS, the main-wrapper, which wraps the post has a margin of 1%.

Fig 1: Blogger Post on Firefox and IE (before fixing the IE Sidebar float drop problem)



To fix the IE sidebar drop problem in the above code, I decided to have two sidebars, one for the left and right and tweak their code separately, therefore I used two sidebars, namely the left-sidebar-wrapper and the right-sidebar-wrapper with similar code as a first step to address this issue, after doing this all you need to do is to replace the first occurrence of sidebar-wrapper (after its declaration) in the template code to left-sidebar-wrapper and the second occurrence to right-sidebar-wrapper, then remove the sidebar-wrapper declaration as we no longer need that.

As a next step, I decided to change the float property on my right-sidebar to float:right, remove the margin property for my main-wrapper (which wraps the post) and have a right margin of 1% for my left-sidebar-wrapper (with float:left) and left margin of 1% for my right-sidebar-wrapper (float:right) and it WORKED!!!

The code snippet which addresses the IE Sidebar float drop problem for my blog now is

Listing 2: Blogger code snippet for my post and sidebars (after fixing the IE Sidebar float drop problem)
#content-wrapper {
width: 98%;
margin: 0 1%;
padding: 0;
text-align: left;
background-color: $mainBgColor;
border: 1px;
border-top: 0;
}

#main-wrapper {
width: 66%;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.left-sidebar-wrapper {
width: 16%;
float: left;
margin: 0 1% 0 0;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.right-sidebar-wrapper {
width: 16%;
float: right;
margin: 0 0 1% 0;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Fig 2: Blogger Post on Firefox and IE (before fixing the IE Sidebar float drop problem)



Summary...

To fix the IE Sidebar float drop problem for your blog its recommended to

1. Use two sidebars, left-sidebar-wrapper and right-sidebar-wrapper with the left-sidebar-wrapper having float:left and the right-sidebar-wrapper having float-right property.

2. Its better to use a right margin in left-sidebar-wrapper and a left margin for the right-sidebar-wrapper than having a margin for the main-wrapper for posts fix the IE sidebar drop problem as shown above.

4 comments:

krishnamoorthy.in said...

Thanks for this ! I had the same proble and fixed with the help of your post!

Anonymous said...

You can do it with one sidebar
make sidebar wrapper
overflow:hidden;

http://www.googleadsense-tour.blogspot.com/

Youngistaan said...

Thanks for the help.

WinNym said...

ahhhh finaly i can fix the same problem.... thankyou for your post..


Copyright © 2016 Prasanna Seshadri, www.prasannatech.net, All Rights Reserved.
No part of the content or this site may be reproduced without prior written permission of the author.