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.>:/