Sidebar moved to the bottom while editing CSS

  • Unknown's avatar
    bernlemos · Member ·

    Hey everyone,

    I was editing my blog’s CSS (basically, just changing the colors) when I suddenly noticed that my sidebar moved to the bottom of the page. I am on IE 7 and my original theme is Mistylook. My blog is http://www.indigoeomar.wordpress.com . Can you please tell what I need to do to put it back to the original position and what I should do to avoid this situation.

    Thanks,

    Indigo

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    This is typically caused by an open HTML tag in one of your posts.

    Go to settings > Writing and select “WordPress should correct invalidly nested XHTML automatically” and then click “Save Changes.”

    Now, starting with your latest post, open it in the editor, make one minor change such as adding a space and then deleting it, and then click “Update Post.” Check your blog and see if it is back to normal. If not, open the next post and do the same thing until it goes back to normal.

  • Unknown's avatar
    timethief · Member ·

    As you have been CSS editing if the solution I posted above does not work then you will know for sure that it was your CSS editing that caused the problem.

  • Unknown's avatar
    hallluke · Member ·

    Look in the CSS for where you have #content styles. You need to change the width and remove the margins as shown below and it will fit your page properly again.

    #content {width:770px; margin:0;}

    lh

  • Unknown's avatar
    bernlemos · Member ·

    Thanks for the help! However, I tried both things and none worked. It doesnt seem to be a problem of width for both content box and sidebar. Could it be that the sidebar has been set to left? Otherwise, here’s my CSS:

    body {
    background:#D9E3EF;
    color:#4D4D4D;
    font:62.5% Georgia, “Times New Roman”, Times, serif;
    text-align:center;
    }

    * {
    margin:0;
    padding:0;
    }

    a {
    color:#4682B4;
    text-decoration:underline;
    }

    a:visited {
    color:#4682B4;
    text-decoration:underline;
    }

    a:hover {
    color:#4682B4;
    text-decoration:underline;
    }

    blockquote {
    font-style:italic;
    font-family:Georgia, “Times New Roman”, Times, serif;
    color:#4682B4;
    border-left:1px solid #aaa;
    margin:0 30px 20px;
    padding:0 0 0 10px;
    }

    abbr,acronym {
    border-bottom:1px dotted #333;
    text-transform:uppercase;
    cursor:help;
    }

    code {
    color:#4682B4;
    font-family:”Courier New”, Courier, monospace;
    }

    pre {
    width:500px;
    overflow:auto;
    font-size:1.3em;
    float:left;
    clear:both;
    margin:0 0 20px;
    }

    * html pre {
    font-size:1em;
    }

    p.center {
    text-align:center!important;
    }

    p.bottom {
    margin:0!important;
    }

    p.unstyled {
    font-size:1.4em;
    }

    .flickr_blue {
    color:#007ae4;
    text-transform:lowercase;
    }

    .flickr_pink {
    color:#ff2a96;
    text-transform:lowercase;
    }

    h1 {
    font:bold 3.6em Helvetica, Arial, sans-serif;
    letter-spacing:-.03em;
    }

    * html h1 {
    letter-spacing:-.1em;
    }

    #masthead h1 {
    border-top:1px solid #ccc;
    text-align:center;
    clear:both;
    padding:15px 0;
    }

    h1 a,h1 a:visited,h1 a:hover {
    color:#4682B4;
    text-decoration:none;
    }

    h2 {
    font:bold 2em Helvetica, Arial, sans-serif;
    color:#000;
    }

    h2 a {
    color:#000;
    text-decoration:none;
    }

    h2 a:visited {
    color:#4682B4;
    text-decoration:none;
    }

    h2 a:hover {
    color:#4682B4;
    text-decoration:none;
    }

    .posts h2 {
    line-height:1.2em;
    margin:0 0 2px;
    }

    .pages h2 {
    background:url(‘images/hr_title_sep.gif’) 0 100% no-repeat;
    margin:0 0 15px;
    padding:0 0 12px;
    }

    h2.archive_head {
    font-weight:bold!important;
    font-size:1.4em!important;
    text-transform:uppercase!important;
    letter-spacing:normal!important;
    border-top:3px solid #000!important;
    background:url(‘images/hr_dot_black.gif’) 0 100% repeat-x!important;
    margin:0 0 25px!important;
    padding:6px 2px!important;
    }

    h2.page_header {
    background:url(‘images/hr_title_sep.gif’) 0 100% no-repeat;
    margin:0 0 15px!important;
    padding:0 0 12px!important;
    }

    h3 {
    font:bold 1em Helvetica, Georgia, “Times New Roman”, Times, serif;
    text-transform:uppercase;
    color:#4682B4;
    }

    .entry h3 {
    margin:35px 0 10px;
    }

    .entry h3.top {
    margin:0 0 10px!important;
    }

    h3.comments_headers {
    font-size:1.4em;
    }

    h4 {
    font:italic 1.2em Georgia, “Times New Roman”, Times, serif;
    color:#4682B4;
    }

    h4 a,h4 a:visited {
    color:#4682B4;
    text-decoration:none;
    }

    h4 a:hover {
    color:#4682B4;
    text-decoration:underline;
    }

    .posts h4 {
    background:url(‘images/hr_title_sep.gif’) 0 100% no-repeat;
    margin:0 0 15px;
    padding:0 0 12px;
    }

    .pages h4 {
    background:url(‘images/hr_tag_sep.gif’) no-repeat;
    font-size:1.2em;
    line-height:1.7em;
    clear:both;
    margin:0 0 50px;
    padding:5px 0 0;
    }

    #container {
    width:770px;
    margin:15px auto 0;
    }

    #content_box {
    width:770px;
    text-align:left;
    float:left;
    clear:both;
    }

    #content {
    width:500px;
    float:left;
    overflow:hidden;
    padding:0 40px 0 0;
    }

    * html #content {
    overflow:hidden;
    }

    #sidebar {
    width:230px;
    float:left;
    overflow:hidden;
    }

    * html #sidebar {
    overflow:hidden;
    }

    #footer {
    width:770px;
    border-top:2px solid #ccc;
    font:bold 1.2em/1.4em Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    float:left;
    clear:both;
    padding:12px 0;
    }

    #masthead {
    width:770px;
    }

    ul#nav {
    list-style:none;
    width:750px;
    background:url(‘images/hr_dot_black.gif’) repeat-x;
    border-bottom:3px solid #000;
    float:left;
    clear:both;
    padding:0 10px;
    }

    ul#nav li {
    font:bold 1.4em Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    float:left;
    padding:12px 40px 10px 0;
    }

    ul#nav li a,ul#nav li a:visited {
    color:#4682B4;
    text-decoration:none;
    }

    ul#nav li a:hover {
    color:#4682B4;
    text-decoration:underline;
    }

    ul#nav li a.current,ul#nav li a.current:visited,ul#nav li a.current:hover,ul#nav li.current_page_item a,ul#nav li.current_page_item a:visited,ul#nav li.current_page_item a:hover {
    color:#4682B4;
    text-decoration:underline;
    }

    ul#nav li.rss {
    float:right;
    padding:12px 0 10px;
    }

    ul#nav li.rss a {
    background:url(‘images/icon_rss.gif’) 100% 50% no-repeat;
    padding:0 18px 0 0;
    }

    #header_img {
    border-bottom:1px solid #000;
    float:left;
    clear:both;
    margin:0 0 30px;
    }

    #header_img img {
    display:block;
    }

    .sticky {
    background:#f7f7f7;
    margin-bottom:15px;
    padding:15px;
    }

    .entry {
    font-size:1.4em;
    line-height:1.7em;
    }

    .entry blockquote {
    font-size:1em;
    }

    .entry blockquote.right {
    border-left:0 double #aaa;
    border-right:0 double #aaa;
    border-top:3px double #aaa;
    border-bottom:3px double #aaa;
    width:200px;
    font-style:normal!important;
    font-size:1.3em!important;
    text-align:center;
    float:right;
    margin:5px 0 5px 15px;
    padding:.3em 0!important;
    }

    .entry blockquote.left {
    border-left:0 double #aaa;
    border-right:0 double #aaa;
    border-top:3px double #aaa;
    border-bottom:3px double #aaa;
    width:200px;
    font-style:normal!important;
    font-size:1.3em!important;
    text-align:center;
    float:left;
    margin:5px 15px 5px 0;
    padding:.3em 0!important;
    }

    .entry blockquote.right p,.entry blockquote.left p {
    line-height:1.5em!important;
    margin:0!important;
    }

    .entry p {
    margin:0 0 15px;
    }

    .entry ul,.entry ol {
    margin:0 0 15px 40px;
    }

    .entry ul {
    list-style-type:square;
    }

    .entry li {
    margin:0 0 5px;
    }

    .entry ul li ul,.entry ul li ol,.entry ol li ul,.entry ol li ol {
    margin:5px 0 5px 30px;
    }

    .entry dl {
    margin:0 0 15px;
    }

    .entry dt {
    font-weight:bold;
    }

    .entry dd {
    margin:0 0 15px 20px;
    }

    .entry .gallery dd {
    margin:0;
    }

    .entry .ad {
    float:right;
    margin:0 0 15px 15px;
    }

    .entry .ad_left {
    float:left;
    margin:0 15px 15px 0;
    }

    .entry a img {
    border:0 none;
    }

    .entry img.left {
    border:3px double #bbb;
    float:left;
    clear:left;
    margin:5px 15px 5px 0;
    padding:3px;
    }

    .entry img.right {
    border:3px double #bbb;
    float:right;
    clear:right;
    margin:5px 0 5px 15px;
    padding:3px;
    }

    .entry img.center {
    display:block;
    border:3px double #bbb;
    float:none;
    clear:both;
    margin:0 auto 15px;
    padding:3px;
    }

    .entry img.off {
    border:none!important;
    padding:0!important;
    }

    .entry img.stack {
    clear:none!important;
    }

    .entry img.wp-smiley {
    border:none!important;
    float:none!important;
    clear:none!important;
    margin:0!important;
    padding:0!important;
    }

    .tagged {
    background:url(‘images/hr_tag_sep.gif’) no-repeat;
    font-size:1.2em;
    line-height:1.7em;
    color:#4682B4;
    clear:both;
    margin:0 0 50px;
    padding:5px 0 0;
    }

    .tagged a,.tagged a:visited {
    color:#4682B4;
    text-decoration:none;
    padding:3px;
    }

    .tagged a:hover {
    color:#4682B4;
    background:#333;
    text-decoration:none;
    }

    .add_comment {
    display:block;
    font-weight:bold;
    float:right;
    padding:0 0 0 20px;
    }

    .add_comment a,.add_comment a:visited {
    color:#4682B4;
    text-decoration:none;
    padding:0;
    }

    .add_comment a:hover {
    color:#4682B4;
    background:none;
    text-decoration:underline;
    }

    .navigation {
    width:500px;
    font-size:1.4em;
    float:left;
    margin:0 0 40px;
    }

    * html .navigation {
    margin:0 0 30px;
    }

    .previous {
    float:left;
    padding:0 20px 0 0;
    }

    .next {
    float:right;
    }

    .clear {
    width:500px;
    height:1px;
    clear:both;
    }

    #sidebar a img {
    border:none;
    }

    ul.sidebar_list {
    list-style:none;
    }

    ul.sidebar_list li.widget {
    width:230px;
    font-size:1.2em;
    line-height:1.4em;
    float:left;
    margin:0 0 30px;
    }

    li.widget h2,li.linkcat h2 {
    font-weight:bold;
    font-size:1.2em;
    text-transform:uppercase;
    letter-spacing:normal;
    border-top:3px solid #000;
    background:url(‘images/hr_dot_black.gif’) 0 100% repeat-x;
    margin:0 0 10px;
    padding:6px 2px;
    }

    li.widget p {
    margin:0 0 15px;
    padding:0 10px;
    }

    li.widget a img {
    border:none;
    }

    li.widget ul,li.linkcat ul {
    list-style:square;
    margin:0 0 15px 20px;
    }

    li.widget ol {
    margin:0 0 15px 20px;
    }

    li.widget li,li.linkcat li {
    margin:0 0 8px;
    }

    li.widget li a,li.widget li a:visited,li.linkcat li a,li.linkcat li a:visited {
    text-decoration:none;
    }

    li.widget li a:hover,li.linkcat li a:hover {
    text-decoration:underline;
    }

    li.widget li .recent_date {
    font-weight:bold;
    color:#4682B4;
    padding:0 0 0 8px;
    }

    li.widget ul.flickr_stream {
    list-style:none;
    margin:0;
    padding:0 10px;
    }

    li.widget ul.flickr_stream li {
    display:inline;
    margin:0;
    padding:0 5px 5px 0;
    }

    li.widget ul.flickr_stream li a img {
    padding:3px;
    }

    li.widget ul.flickr_stream li a:hover img {
    background:#4682B4;
    }

    li.widget_flickrrss a img {
    margin:0 5px 5px 0;
    padding:3px;
    }

    li.widget_flickrrss a:hover img {
    background:#4682B4;
    }

    #calendar_wrap {
    font-size:1.2em;
    }

    ul.sidebar_list li#linkcat-1,ul.sidebar_list li#linkcat-2,ul.sidebar_list li#linkcat-3,ul.sidebar_list li#linkcat-4,ul.sidebar_list li#linkcat-5,ul.sidebar_list li#linkcat-6,ul.sidebar_list li#linkcat-7,ul.sidebar_list li#linkcat-8,ul.sidebar_list li#linkcat-9 {
    width:230px;
    font-size:1.2em;
    line-height:1.4em;
    float:left;
    margin:0 0 30px;
    }

    ul.sidebar_list li#linkcat-1 h2,ul.sidebar_list li#linkcat-2 h2,ul.sidebar_list li#linkcat-3 h2,ul.sidebar_list li#linkcat-4 h2,ul.sidebar_list li#linkcat-5 h2,ul.sidebar_list li#linkcat-6 h2,ul.sidebar_list li#linkcat-7 h2,ul.sidebar_list li#linkcat-8 h2,ul.sidebar_list li#linkcat-9 h2 {
    font-weight:bold;
    font-size:1.2em;
    text-transform:uppercase;
    letter-spacing:normal;
    border-top:3px solid #000;
    background:url(‘images/hr_dot_black.gif’) 0 100% repeat-x;
    margin:0 0 10px;
    padding:6px 2px;
    }

    ul.sidebar_list li#linkcat-1 ul,ul.sidebar_list li#linkcat-2 ul,ul.sidebar_list li#linkcat-3 ul,ul.sidebar_list li#linkcat-4 ul,ul.sidebar_list li#linkcat-5 ul,ul.sidebar_list li#linkcat-6 ul,ul.sidebar_list li#linkcat-7 ul,ul.sidebar_list li#linkcat-8 ul,ul.sidebar_list li#linkcat-9 ul {
    list-style:square;
    margin:0 0 15px 20px;
    }

    ul.sidebar_list li#linkcat-1 li,ul.sidebar_list li#linkcat-2 li,ul.sidebar_list li#linkcat-3 li,ul.sidebar_list li#linkcat-4 li,ul.sidebar_list li#linkcat-5 li,ul.sidebar_list li#linkcat-6 li,ul.sidebar_list li#linkcat-7 li,ul.sidebar_list li#linkcat-8 li,ul.sidebar_list li#linkcat-9 li {
    margin:0 0 8px;
    }

    ul.sidebar_list li#linkcat-1 li a,ul.sidebar_list li#linkcat-2 li a,ul.sidebar_list li#linkcat-3 li a,ul.sidebar_list li#linkcat-4 li a,ul.sidebar_list li#linkcat-5 li a,ul.sidebar_list li#linkcat-6 li a,ul.sidebar_list li#linkcat-7 li a,ul.sidebar_list li#linkcat-8 li a,ul.sidebar_list li#linkcat-9 li a {
    text-decoration:none;
    color:#4682B4;
    }

    ul.sidebar_list li#linkcat-1 li a:hover,ul.sidebar_list li#linkcat-2 li a:hover,ul.sidebar_list li#linkcat-3 li a:hover,ul.sidebar_list li#linkcat-4 li a:hover,ul.sidebar_list li#linkcat-5 li a:hover,ul.sidebar_list li#linkcat-6 li a:hover,ul.sidebar_list li#linkcat-7 li a:hover,ul.sidebar_list li#linkcat-8 li a:hover,ul.sidebar_list li#linkcat-9 li a:hover {
    text-decoration:underline;
    color:#4682B4;
    }

    #footer a,#footer a:visited,#footer a:hover {
    color:#333;
    text-decoration:none;
    }

    #comments {
    width:500px;
    float:left;
    clear:both;
    }

    ul#comment_list {
    list-style:none;
    border-top:1px solid #bbb;
    float:left;
    margin:0 0 40px;
    }

    ul#comment_list li.comment {
    width:500px;
    border-bottom:1px dotted #bbb;
    float:left;
    padding:15px 0 0;
    }

    ul#comment_list li.trackback,ul#comment_list li.pingback {
    width:490px;
    background:url(‘images/trackback_bg.gif’);
    padding:15px 5px 0;
    }

    .comment_meta {
    margin:0 0 15px;
    }

    .comment_meta strong {
    font-size:1.6em;
    }

    .comment_time {
    font:normal 1.1em Verdana, Helvetica, Arial, sans-serif;
    color:#4682B4;
    }

    .comment_time a,.comment_time a:visited,.comment_time a:hover {
    color:#4682B4;
    text-decoration:none;
    }

    .comment .entry {
    padding:0 15px;
    }

    #comment_form {
    width:500px;
    float:left;
    padding:10px 0;
    }

    #comment_form p {
    padding:6px 0;
    }

    #comment_form label {
    font-size:1.2em;
    padding:0 0 0 10px;
    }

    #comment_form .text_input {
    width:191px;
    color:#444;
    font:normal 1.4em Georgia, “Times New Roman”, Times, serif;
    border-top:2px solid #999;
    border-left:2px solid #999;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    padding:3px;
    }

    #comment_form .text_area {
    width:321px!important;
    }

    #comment_form .text_input:focus {
    border-top:2px solid #666;
    border-left:2px solid #666;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    }

    #comment_form .form_submit {
    background:url(‘images/submit_bg.gif’);
    border:3px double #666;
    font:bold 1.4em Georgia, “Times New Roman”, Times, serif;
    cursor:pointer;
    padding:6px 4px;
    }

    .commentlist .avatar {
    border:1px solid #ccc;
    margin-left:5px;
    float:right;
    padding:3px;
    }

    #search_form .search_input {
    width:221px;
    color:#090;
    font:normal 1em Georgia, “Times New Roman”, Times, serif;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;
    padding:3px;
    }

    li.widget .search_input {
    font-size:1.2em!important;
    }

    #search_form .search_input:focus {
    border-top:1px solid #666;
    border-left:1px solid #666;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    }

    img.centered,img.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    img.alignright {
    display:inline;
    margin:0 0 2px 7px;
    padding:4px;
    }

    img.alignleft {
    display:inline;
    margin:0 7px 2px 0;
    padding:4px;
    }

    .alignright {
    float:right;
    }

    .alignleft {
    float:left;
    }

    .aligncenter,div.aligncenter {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    .wp-caption {
    border:1px solid #ddd;
    text-align:center;
    background-color:#f3f3f3;
    padding-top:4px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin:10px;
    }

    .wp-caption img {
    border:0 none;
    margin:0;
    padding:0;
    }

    .entry dd.wp-caption p.wp-caption-text,.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px 0;
    }

    .commentlist li {
    float:none!important;
    }

    .commentlist .children {
    margin-top:10px;
    margin-left:10px;
    float:none!important;
    border-left:1px dotted #BBBBBB!important;
    width:auto!important;
    }

    .commentlist .children li {
    float:none!important;
    list-style:none;
    border-bottom:0!important;
    width:auto!important;
    padding:10px!important;
    }

    .commentlist #respond {
    margin-top:20px;
    background:white;
    }

    .commentlist #comment_form {
    float:none;
    }

    .children #respond {
    padding-left:10px;
    }

    #wp_tag_cloud {
    line-height:normal;
    }

  • Unknown's avatar
    coziggy · Member ·

    Indigo-

    I’m having the same problem on my blog: http://www.coziggy.com (self-hosted). I see you finally figured this out and your widgets are back on the side bar. How did you end up fixing this?

    Thanks

  • Unknown's avatar
    coziggy · Member ·

    update – just realized I’m only having the widget problem with Firefox (v 3.6.3). I tested the site on Chrome and IE 8. Strange.

  • Unknown's avatar
    timethief · Member ·

    @coziggy

    I’m having the same problem on my blog: http://www.coziggy.com (self-hosted).

    I’m sorry but you will not be getting any assistance with your self-hosted blog on this wordpress.COM Css Customization Forum. Here only those who have blogs being free hosted by wordpress.CONM who have paid for a CSS editing upgrade receive support. The versions of themes we have here are all coded to run on wpMU (multiuser). Also CSS is theme specific, so we cannot use the CSS stylesheets from other themes with the themes here at wordpress.COM.

    Support for your self-hosted install must come from http://wordpress.ORG/support https://en.forums.wordpress.com/topic/please-read-me-first-before-posting?replies=1

  • The topic ‘Sidebar moved to the bottom while editing CSS’ is closed to new replies.