Primary – Content – Secondary layout & sidebars question

  • Resolved domdomdom

    (@domdomdom)


    11 years ago

    Hello again,

    I apologize if this comes across slightly silly, but I can’t work out how the sidebars work here.. I need to have a left and right sidebar with a content in the middle.The CSS for this layout in the theme is: 

    /* Layout: Primary Sidebar - Content - Secondary Sidebar */
.layout-pcs .content-area { float: left; width: 100%; }
.layout-pcs #content { margin-left: 26%; margin-right: 20%; }
.layout-pcs #main .widget-area { float: left; }
.layout-pcs #secondary { width: 22%; margin: 0 0 0 -100%; }
.layout-pcs #tertiary { width: 16%; margin: 0 0 0 -16%; }

    I don’t really understand how the margins above work- why are they ‘-100%’ and ‘-16%’? If I try to change percentages around, all the sidebars go either awol or become not very responsive.. I guess I’m asking if it’s possible to shift it all a bit and what is the ‘theory’ behind the settings of these margins, so that I understand how they work? I apologise if it’s a silly question, but can’t find the answer anywhere… =/

    Thanks a lot,
    Dom ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Slobodan Manic

    (@slobodanmanic)

    What is it that you’re trying to achieve?

    Thread Starter domdomdom

    (@domdomdom)

    HI Slobodan and thanks for getting back to me.

    I was trying to change the Primary-Content-Secondary from original sizes to:

    Content area width: 50%
    Secondary width: 23%
    Tertiary width: 23%
    + 1% margins.

    I was trying to change margins & widths but got a bit lost with #secondary having -100% and tertiary having -16% margin, and when I tried to adjust it all went non-responsive and weird so I deleted changes and am seeking help… ??

    Does that make sense…? =/

    Thread Starter domdomdom

    (@domdomdom)

    Hello Slobodan,

    Ok, I’ll try again and be more precise.

    I made my body & #main 100% wide. This attached left sidebar right to the left edge of the screen, so I tried increasing margin e.g.

    from
    .layout-pcs #secondary { width: 22%; margin: 0 0 0 -100%; }

    to

    .layout-pcs #secondary { width: 22%; margin: 0 0 0 -98%; }

    that messes up the website being responsive and the left sidebar completely disappears once the screen gets smaller..

    Could you please tell me what I’m doing wrong?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Primary – Content – Secondary layout & sidebars question’ is closed to new replies.