Fix your blogger template sidebar Drops

When your site gets a visitor and finds that one of your sidebar has been pushed below the posts, he’ll consider your site of not a decent quality and you might lose a regular reader

The ready made templates which are available for Bloggers are from the side of some world class designers but when a blogger places an image, video etc. in the middle of the post and the width of the images/video is more than that space provided, in some versions of Web browser, the sidebar tends to drop ,ie, it slips down blog posts this is also known as float drops.

I had a similar problem when one of my friends said that the left sidebar is dropping for my Minima three column template in some old versions of Internet Explorer. My site is loaded with a lot of stuff and maybe in some web browser my sidebar falls. My site in short was looking a piece of crap without one sidebar.

A normal css definition for a sidebar looks like

#sidebar-wrapper

{

width: 240px;

float: right;

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 */

}

word-wrap:break-word property for fixing long floating text works only in Internet Explorer

Too make your sidebar fixed in one location, add these three CSS properties to the sidebar-wrapper property of your template

#sidebar-wrapper

{

positon:absolute;

magin-top:0px;

margin-left:0px;

}

So now the code looks like this

#sidebar-wrapper

{

positon:absolute;

magin-top:1px;

margin-left:1px;

width: 240px;

float: right;

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 */

}

This confirms to the Web Browser that the sidebar has to remain fixed at one place only in all versions of the Web Browser. The Sidebar will remain static and should not be affected by any long floating image/text/video.

Comments

  1. Thanks for this tip. My blog really looked crappy with Firefox.
    I tried your sidebar code, and hopefully it works in my blog. However, I experimented and increased my #main width just to check if the sidebar will no longer be pushed down. Unfortunately, it still got pushed down. Do I also need to place some code in the #main? Thanks

    ReplyDelete
  2. Hi topsin!

    Actually all your content is wrapped inside a div called container

    You may see it in you css definition
    if you increase main{width} then you will have to increae the container{width} same.

    Then it will fly up!
    Best of luck

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. ashwini khare stole my tips.
    http://www.supershiva.blogspot.com

    ReplyDelete
  5. Hi Ashwini,

    My 3 column minima has dead sidebar links below the latest (top) post in IE7 browser.

    Any ideas??

    Thanks!
    http://stratoblogster.blogspot.com
    bizthin at yahoo dot com

    ReplyDelete
  6. The best one I ever read !!!

    ReplyDelete
  7. hello, i like this post, outstanding write-up, as usual.

    ReplyDelete
  8. Thanks. i havent tried the position absolute tag. Just the wordwrap and overflow. Seems okay now

    ReplyDelete
  9. Thanks you really helped me fix my template in a hurry... appreciate the tips.

    ReplyDelete
  10. Wow, this post was such a lifesaver! :)) My blog looked out of line in IE but looked normal in FF.. Hahaha, thanks for the info! :P

    ~Bunny.
    http://onegoldenafternoon.blogspot.com

    ReplyDelete
  11. All the Chanel are from a factory near Paris, each one requires six workers to spend 10 hours to process through to complete a full 180. If you’re into vintage bags, then perhaps you’ll find this Chanel handbags interesting; but if you’re not fond of vinyl handbags, then you shouldn’t be reading this the moment you see the photo. This chanel glasses indeed made from clear vinyl material and it is trimmed in contrast black patent leather for a bit of refined and sophisticated style and design. The strap has 12-inch of drop, enough to carry this with ease over your shoulders.And since this chanel black is vintage, the tag of $2,860 isn’t any more surprising. Be sure that whatever you place inside this clear bag is pleasing to the eye and that it doesn’t include your private stuff. replica Gucci handbags, black chanel and sundry more!

    ReplyDelete
  12. Fumatul si sex oral e cel mai tare articol de pe Blogu lu fumatoru asa ca intrati si ne vizitati sa cititi despre fumuri, fmatori efecte tigari si mod de preparare.

    ReplyDelete
  13. I am still having this problems with this. I am doing everything you say but is still dropping. Am going to rest for a while and try again in a while. Am too stressed to think clearly right now.

    ReplyDelete
  14. Here’s a list of tools you will need to start: Jewelers’ pandora jewellery wire cutters - If you can only afford one pair, get memory wire shears. pandora charms These are designed to make clean cuts on tough memory wire, so can also be used for pandora charms uk softer wires. Chain-nose pliers sometimes called cheap pandora charms needle-nose pliers – Very versatile for picking up and grasping small items, pandora charms sale bending eye pins, closing jumps rings, even closing crimp beads. discount pandora charms Round-nose pliers – Used for creating loops on beaded head and eye pins. Can also be used for winding your own jump rings and as the second pliers you’cheap pandora ll need for closing jump rings. Optional pliers – Wire-looping pliers which have several graduated circumferences to allow you to form perfectly uniform jump rings and loops in place of the pandora discount uk round-nose pliers mentioned above. Crimping pliers which have little notches to allow you to both flatten a crimp bead and then bend it to form a rounded finished look instead of the flat crimp you pandora uk get using the chain-nose pliers. As for materials, I recommend some assortment packs of beads in coordinating colors, some decorative metal spacers, seed beads in both silver and gold These can serve as spacers and beautifully set off pandora sale your other beads., tube-shaped crimp beads Buy the best you can find – these are what hold it all together!, head and eye pins. Other than that, let your choice of project be your guide. You might want some silver or pewter charms.

    ReplyDelete
  15. eey you did it, you found the way to keep clean my blog, you don't know how many time I spent trying to get this, and finally and thank to you I got it, dude definitely we need to party.

    ReplyDelete
  16. The symbol pandora bracelets of trustworthiness, faithfulness, and fidelity. pandora jewellery It was thought that the fourth pandora charms finger contained a special pandora canada vein that was connected directly pandora shop to the heart, and therefore cheap pandora this became the official finger for pandora necklaces the wedding band..Rings pandora sets have been used as a symbol of pandora earrings love for many years. To purchase a pandora sale large diamond, you would have a diamond that is pandora beads quite rare. This is shown in pandora 2010 theprice of a diamond ring that highlights pandora bangles a 2-caret gem versus a ring that has cheap pandora canada two 1-caret stones set in the cheap pandora beads center.

    ReplyDelete
  17. my site naijan.com is still dropping I will try your tips when I wake up

    ReplyDelete
  18. EVISU ジーンズ 価格Serial denim entrepreneur Scott Morrison is at it again.EVISU ジーンズ 直営店 He's the co-founder behind both Paper Denim and Cloth and Earnest Sewn, and was CEO and creative director for Evisu before they shuttered their US business and moved the entire operation to Hong Kong. Now,エヴィス ジーンズ 店舗 he's launching a new line of denim called 3x1エヴィス ジーンズ.

    ReplyDelete
  19. You SAVED my life. gosh.. i've been hours awake searching for this.. and i didn't figured out the word "absolute". thanks!

    ReplyDelete
  20. This comment has been removed by a blog administrator.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Please avoid hyper links in Comments. Any offensive comment will be deleted

Popular posts from this blog

New blogger templates (XML) 3 columns

Why I do not shift to a custom domain

Site Report for October, Perfomance report of AdSense referrals