2

I am working with a fluid 100% theme with Panels 6.x-3.9.

I have created a custom layout in Panels; it is based on threecol_25_50_25_stacked (First column is 25%, center is 50%, and last is 25%), and I created it for a 20/50/30 layout.

In the original threecol_25_50_25_stacked CSS file, the code is:

.panel-3col-stacked .panel-col-first { 
  float: left; 
  width: 25%;
}

.panel-3col-stacked .panel-col .inside { 
  margin: 0 .5em 1em .5em;
}

.panel-3col-stacked .panel-col { 
  float: left; 
  width: 50%; 
}

.panel-3col-stacked .panel-col .inside { 
  margin: 0 .5em 1em .5em;
}

.panel-3col-stacked .panel-col-last { 
  float: left; 
  width: 25%; 
}

.panel-3col-stacked .panel-col-last .inside { 
  margin: 0 0 1em .5em;
}

In my CSS for the custom layout, I changed the widths to 20%, 50%, 30%, respectively.
When I resize the browser window, and dragging it smaller, the first column gets overlapped with the center column. With all padding and margins unchanged, it should not do this, should it?
The original layout 25/50/25 does not do this. What am I missing?

Here is a breakdown of what I have tested:

  • Garland
    Original 25/50/25 Stacked: overlaps
    Custom 20/50/30 Stacked: overlaps

  • Acquia Propser Fluid (Fusion sub-theme)
    Original 25/50/25 Stacked: does not overlap
    Custom 20/50/30 Stacked: overlaps

  • Fusion Core Fluid
    Original 25/50/25 Stacked: does not overlap
    Custom 20/50/30 Stacked: overlaps

  • Zen Core Fluid
    Original 25/50/25 Stacked: does not overlap
    Custom 20/50/30 Stacked: overlaps

  • CTI Flex (Zen Sub-theme) Fluid
    Original 25/50/25 Stacked: does not overlap
    Custom 20/50/30 Stacked: overlaps

    it doesn't overlap

    it does overlap

  • Hello, picxelplay; welcome on Drupal Answers. Did you try changing the theme used by the website? – kiamlaluno Apr 27 '11 at 23:51
  • Hello, yes I have. Tested on Fusion core, 3 Fusion sub themes, Zen Core, and 2 Zen sub themes. – picxelplay Apr 28 '11 at 0:02
  • @picxelplay I would also try with one of the core themes, including Garland. Sometimes it is just a problem of compatibility between a third-party module and a theme, or a group of themes. – kiamlaluno Apr 28 '11 at 0:04
  • Sorry I should have also mentioned, that it does not overlap with the themes mentioned in fixed width, but it does overlap in Garland (Garland is fluid) – picxelplay Apr 28 '11 at 0:08
  • @picxelplay There is nothing to be sorry. Thank you for the additional information, which would help who answers to give a more correct answer. – kiamlaluno Apr 28 '11 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.