Support » Themes and Templates » right sidebar has moved to the bottom of the page

Viewing 9 replies - 1 through 9 (of 9 total)
  • WPyogi

    (@wpyogi)

    Forum Moderator

    Try validating your HTML and CSS — errors often cause problems like that:

    http://codex.wordpress.org/Validating_a_Website

    WPyogi

    (@wpyogi)

    Forum Moderator

    Also look at the width of your primary div — it 1200px wide which is the max width of the whole page — so there is no room for the sidebar — hence it goes below.

    It looks like your container div #primary has a width of 1200px which is pushing down the sidebar.. If you remove the width on that div the sidebar aligns to the right again.

    Hello WPyogi and pdxollo,
    thanks for the suggestions !

    What i made as change :

    • page width from 100% to 1200px
    • primary from 100% to 1200px
    • content from 70% to 840px
    • secondary from 25% to 300px

    I just calculated everything from % to px. So, before the ratio was the same.
    But for your suggestion, i reduced the primary to 1190px and later 1180px, the sidebar did not move back to its place…
    In the primary there is still place because : 15px margin + 840 width + 300px width + 15px margin = 1170px, so there is still 30px d’espace between the content and the sidebar…

    I used the suggested validator, i corrected the major html errors and i do not see major problems of the css :

    URI : http://webdesign.igorlaszlo.com/wp-content/themes/ilwebdesign/style.css
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 La propriété progid n'existe pas : DXImageTransform
    656	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#777777, Direction=333, Strength=10);
    657	 #access li:hover > a, #access ul ul :hover > a, #access a:focus	 Erreur lors de l'analyse grammaticale. }
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 La propriété progid n'existe pas : DXImageTransform
    680	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#777777, Direction=333, Strength=10);
    681	 #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a	 Erreur lors de l'analyse grammaticale. }
    1601	 .error404 #main #searchform	 Propriété erronée : border inline n'est pas une valeur de color : 1px inline #e0e0e0
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 La propriété progid n'existe pas : DXImageTransform
    1874	 .featured-post .feature-text:after, .featured-post .feature-image.small:after	 Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    1875		 Erreur lors de l'analyse grammaticale. [: linear-gradient(top]
    1875		 Erreur lors de l'analyse grammaticale. [ rgba(255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,0) 0%]
    1875		 Erreur lors de l'analyse grammaticale. [,rgba(255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1875		 Erreur lors de l'analyse grammaticale. [,255]
    1881		 Erreur lors de l'analyse grammaticale. [,1) 100%); /* W3C */ width: 100%; height: 45px; position: absolute; top: 230px; } .featured-post .feature-image.small:after]
    2338	 .commentlist > li.comment	 Propriété erronée : text-shadow Trop de valeurs, ou valeurs non reconnues : non
    2453	 .commentlist > li.bypostauthor	 Propriété erronée : text-shadow Trop de valeurs, ou valeurs non reconnues : non
    3233	 #ie7 article.intro	 Propriété erronée : padding-left Les valeurs négatives de -7.6% ne sont pas autorisées : -7.6%
    3234	 #ie7 article.intro	 Propriété erronée : padding-right Les valeurs négatives de -7.6% ne sont pas autorisées : -7.6%

    Any suggestion ?

    Maybe the problem comes from the fact that on page resize, the sidebar does not stay at its place but it moves with the page resize movement (dynamique) ? Anyway, all my change from % to pixel was for that aim, i would like to let my page always in its size and if someone’s screen is smaller, he/she must use scrollbars…
    In css, how can i fixe the positions and the web site size (but scrollable down of course) ?

    igorlaszio,
    the issue is still with the width of #primary.. it was set to 100% before which is a relative measurement { 100% of the available space } now you have an explicit width 1200px. #primary is essentially a wrapper for your list of posts so you would have to make it smaller than the overall site wrapper if you want the sidebar to be to the right.

    #page { 1200px }
    #primary { 885px }
    #secondary { 300px }

    Try this out with firebug or chrome developer tools and you can see this fixes the issue.

    Ahhh, thanks a lot pdxollo !!! You brought the light 🙂
    What i understood is that the primary contains both the content and the secondary… but it contains only the content. Now i see why it pushed down the sidebar.
    Thanks again, i can close the topic !

    Auh, i forgot to ask a question… now, when i resize my page for example from right to the left, after i got the max size of the #page (1200px), the sidebar moves down. But i would like that everything (including the sidebar) stays at its place, then the page will not be massy, the visitors just have to use scrollbars… how can i fixe the sidebar on its place at resize movement ?

    Sorry, i close this topic, i started a new one here : http://wordpress.org/support/topic/how-to-fixe-the-page-disable-resizing?replies=1

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘right sidebar has moved to the bottom of the page’ is closed to new replies.