Its common to hear from your blogging friends to say “Hey your sidebar slipped to the bottom.. fixing it will make your blog look great”.. However when you see the blog in the browser everything appears just fine..This will drive you nuts ~x( trying to figure out wahat could be happening.There are two possiblities
POSSIBILITY – 1:-
The problem could be in the visitors screen width and resolution.Not all will be viewing at the same screen widht and resolution.For Eg: A sees with a monitor with 21 inch and B with say 17 inches… so When A sees the blog all the colums are in place (Good.. ok) but when B sees its.. its only natural that the screen cannot accomodate the contents so it drops few items to the bottom.
POSSIBLITY : – 2.
May be you have posted a link that is sooo looong that in an attempt to dispaly in a single line, the rest of the elements are dropped to the bottom.When the link in the main post is loooong, the sidebar is dropped and when vice versa
Take a close look at your template (provided you are able to identify which section represents which colum)This is with refrence to my template
#main-wrapper /*—————Center colum——————-*/
{
color: #666666;
padding: 0px 0px 0px 0px;
border-right: 1px solid maroon;
border-left: 1px solid maroon;
margin-left: 0px;
margin-bottom: 0px;
width: 59%;/* Earlier this used to be 430px*/
float: left;
word-wrap: break-word;/* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper /*————Right side colum—————–*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-top:0px
margin-right: 0px;
text-transform: capitalize;
width: 20%;/* Earlier this used to 160px*/
float: right;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper /*—————-Left side colum————-*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-right: 0px;
width: 20%;/* Earlier this used to 160px*/
float: left;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
If you are trying to convert the width of the colums from pixels to percentage, i suggest that you have a test-blog with exactly the same template and modify the width , once you are satisfied with the look of the colums, then change the appropriate values.If you are not sure, which block represents which colum,:-? its always wise to color-code them for easy recognition.
Color-coding means you give diffrent backgound color for each cloum so that it get easy on you to identify the cencerned block of code in thetemplate.just add
background-color: pink; for one
background-color: green; for one
background-color: yellow; for one
Now when u see in the browser, you know what is happening to exactly which colum.Remeber do this only in the test blog.>:/
Deepa,
To rate we need username and password from newsgator. Will checkout.
Good one and many people always comeup with this issues.
Thank for telling me Priya.. Could you please sign up with news gator and try to rate again.. NG was compatible with older version of blogger… i suppose even tihis is also a trial on new blogger..
Deepa:
I just signed with username and password and rated yours. It works fine.
Thank you Priya
Deepa>,
like I told you I am totally illiterate in these computers languages. However, I thought there were more precise. Just like you described I made changes in my layout, previewed 10 times until I was satisfied and then, when after you save the new template it does not look the way it should. So ” trial and error” has to be the bloggers motto 🙂
Yes Marcia..”Its indeed Trial and Error”.. this has got so much imbibed in me.. even whel cooking… i just try a new recipie so that the total quantity coems up to half a soup-bowl..well..if it comes out well.. i can always increwase the propotion..else the guilt wouldnt kill me if i throw the dish 😀
Deepa,
knock knock
I saw on your profile that you are a teacher. I made a post describing one thing og the Dutch system that I do like. If you have time, interests etc etc etc take a look.
btw i loved your analogy with the cooking :>) today I trew away a bowl of pixels….
Maricia
Sure..Will do ..
🙂
Deepa,
excellent comments, I learned a lot.
tnx and see you around in the blogosphere!
Sure Marcia..
World is indeed a global village
I have had this problem with my 3 – column wealth creation blog, and I have been trying to get the answer for ages! I had not thought of using percentages, (although I use them on my web pages) thanks very much.
Flora
Hi Flora
Welcome
I saw your “wealth creation blog”
when i saw the source code, it was still the pixels..
Thought i should let you know
#content {
width:985px; < -- 100%
#sidebar-r {
width:220px; < -- 20%
#main {
width:485px; < --58%
#sidebar-l {
width:220px; < --20%
You can try changing the percentage and decide.
Deepa,
I tried the percentage trick you pointed out for the side bar in the 3 column blogger template. It didnt not work. I did a lot of stuff on my blogger code and the RHS side bar is missing in IE 6/7. Any thing that I am not able to see and you can point out?
Thanks
Nixtsor
Welcome to my blog
I saw u r blog http://nixstor.blogspot.com/ in FFox and IE..there seems not prb woth FF..
However in IE RHS is visible when idividual posts ( post urls) are clikced.. on the regular blog hoe page as u said RHS is missing..
I saw through u r source code and it so seems u have not converted all the divs into percentage
I hope u do have a copy of the earlier template…I will get back to you in a couple of days.. I am held up with some work.. pls dont mind the delay
I converted from px to % and back to px as the conversion did not help. Let me know if you find any thing, when ever you can. As you said, its only the home page I have issue. the RHS is visible on the individual post pages
Nixtor..I shall take a look As early as possible.. in the mean time.. i hope u have a back up copy if ur old template & also take a copy of the existing template..
Since its not visible in the main page but ok in the postpages.. i suspect some <div> tags have been accidently added / removed…
My guess is you have added the tweaks by hackoshepere ( the read more feature)
Haloscan comments
Sitemeter statistics
Cluster maps..
I hope u do have the link to the site .. where you got this template
Since you are using a 3 col template.. do take a look at http://thrbrtemplates.blogspot.com/2005/12/template-list-added.html
and get the one that closely matches u r current color schema ( u may not get the exact one ).. and upload the new template
( you widget contents will be there… but the scripts u added to the html of the template will not be there when u add a new template)
If all the 3 cols are visible in IE and FF.. we can manually work on the colors of the colums & u can still add your tweaks from hackoshpere – haloscan-sitemeter etc etc…