Panels not collapsing

[lnicks]

I have a 4/8 panel split like so:

<div class="dentFrontPage row small-collapse">
  <div class="dentEventsFront panel-4">
    <div id="dentGift">
      <p>Support UCLA Dentistry</p>
      <p>Make a gift online.</p>
    </div>
    <div id="dentDiversity"></div>
  </div>
  <div class="dentNewsFront panel-8">
    <div class="dentNewsMain row xxsmall-collapse">
      <div></div>
    </div>
    <div class="dentNewsSub row medium-collapse"></div>
  </div>
</div>

The [dentGift] div has a width set to 260px. As I collapse, the panel-8 section does not respect the width and overlaps the panel-4 div.

Unsure if this is a syntax issue on my end, or possibly a bug. May also be related to [#225] re: container max width.

/cc @ebollens @chris4ucla

[ebollens]

Looks to me like you're using an uncontained float...

[lnicks]

no floats at all, using text align / fixed width on the second <p> tag.

This is all of the css I have generated:

#dentGift {
    background-color: #D14519;
    font-family: 'News Cycle', sans-serif;
    height: 65px;
    width: 260px;
    padding: .5em;
}
#dentGift p {
}
#dentGift p:nth-child(1) {
    font-size: 1.4em;
}
#dentGift p:nth-child(2) {
    font-size: 1.2em;
    text-align: right;
}

[ebollens]

Will need to see web inspector output. Is this live somewhere?

[lnicks]

Sure is: http://dentistrydev.oit.ucla.edu/

Also, I should add, it does collapse at the smallest breakpoint, like expected. That screencap is a mid-range breakpoint.

[ebollens]

I'm not seeing any issues in Safari. What browser and version are you using?

[lnicks]

Chrome Version 24.0.1312.52 m, win7

[lnicks]

Safari 5.1.7 (7534.57.2), win7 behaves like Chrome.

[ebollens]

Browser cache bit me. There we go, now seeing the issue.

The problem you've got (you can see this if you use the web inspector) is that you've explicitly defined a width on an internal element #dentGift that is larger than the computed width being derived by the outer element panel-4, since it is computed proportionally. Basically, you're breaking the fluid grid in the same way it will break if you place an image inside of the panel-4 that is larger than the proportionally-computed width. You can see this if you set max-width:100% on the #dentGift element in the same way you would an image.

Using explicit widths is basically going against the fluid grid. You can do it, but if you do, you need to make sure that the panels in question collapse before the overflow point is hit.

[lnicks]

Is it computed proportionally on the fly?

In a 3/2 Split, the 4 panels, on a 960px should be 320px. That doesn't account for gutters, not sure how they apply here 9 (but they're set to 3%, so I can't imagine that being the issue).

The element in question is 260px with no margins.

Not particularly sure how to deal with this for a static element such as a logo, as very few of them are ever going to be 'scalable'. Any recommendations? Design flaw?

[ebollens]

It's computed based on percentages. Your .panel-4, according to web inspector, is 31.62393%.

The outer row .dentFrontPage has set to .small-collapse. That means that it won't collapse until you hit the small breakpoint which, by default, is 600px. That means that, at 601px, which means your usable space will be just under 200px before it cascades. Try changing .small-collapse to some larger collapse to solve the problem.

[lnicks]

Got it working, thank you much @ebollens