Sidebar Below Content. No wrong width, no Invalid W3C Check.

  • Resolved dj_lopez

    (@dj_lopez)


    16 years, 2 months ago

    Hello,

    I edited a theme called master-plan (1 sidebar and content) and added a new sidebar at left, but, although I could add the sidebar, I haven’t been able to show it at the right height (it appears below the content). I think it is not a width problem of any of the elements, I have validated it (here), and I don’t know what to do next…

    Here is my test page:
    https://www.thesoundofdance.com/pruebas/

    Could anyone help me, please?

    Thank you for your attention.

Viewing 3 replies - 1 through 3 (of 3 total)

  • It looks like your main post column may be too wide. Add up the width, margin, padding, and borders of your divs to see if it all fits. Here’s the chart I use to show where all of these apply to something and how you add them:

    | margin | border | padding | width | padding | border | margin |

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Actually, your layout is wrong for a three column theme. You have the main content first, followed by the two sidebars. That won’t work. With a single sidebar, that can work, but not with a double sidebar.

    The only way that layout can work is if you have your sidebars first, followed by your main content. That’s problematic for SEO, but it’s the way the layout has to be unless you want to use trickery. The trickery in this case comes from careful use of negative margins.

    Here’s a modified holy-grail technique for three columns with fixed widths. Emulate it to make your theme work properly.

    <style>
body {
min-width: 600px; /* 2 x left column width + right column width */
}
#wrap {
padding-left: 200px; /* width of left column */
padding-right: 200px; /* width of right column */
}
#wrap .column {
position: relative;
float:left;
}
.block1 {
width: 300px; /* width of center column */
}
.block2 {
margin-left: -300px; /* negative width of center column */
width:200px; /* width of left column */
right:200px; /* width of left column */
}
.block3 {
width: 200px; /* width of right column */
margin-right: -100%;
}
</style>
<body>
<div id="wrap">
<div class="block1 column" style='background-color:red;'>
Main center column
</div>
<div class="block2 column" style='background-color:blue;'>
Side bar on left
</div>
<div class="block3 column" style='background-color:green;'>
Side bar on right
</div>
</div>
</body>

    Thread Starter dj_lopez

    (@dj_lopez)

    Thank you very much for your help!!!

    After having understood the Holy-Grail technique, I have finally fixed the theme and now it is working!

    Thank you again, you have made me happy today! ??

    Best Regards!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Sidebar Below Content. No wrong width, no Invalid W3C Check.’ is closed to new replies.