0

I'm working on this page: http://mockingbirdagency.com/thebox/profilestack.html

Trying to put some breadcrumbs together but they give shifting the profile title bar below and I haven't been able to figure out why, anybody can help ?!

blabldfseges
  • 133
  • 1
  • 11

2 Answers2

1

In your style sheet, add the css rule:

#content-container { clear: both; }

The problem is that the floating bread crumbs are floating beside your content, you need to explicitly tell your content vertically clear them.

Godwin
  • 9,739
  • 6
  • 40
  • 58
0

One solution is to add this element right under the "breadcrumbs-container" div:

<div style="clear:both"></div>

This will clear the floated divs above it.

Additionally, you should only have one div with the id li-bread. Id's are not meant to be duplicated on the same page. Consider using a class instead of an id.

irrelephant
  • 4,091
  • 2
  • 25
  • 41
  • It's true what you say about the `ìd`s. You'll want to use `class`, if it appears more than once in the document. – max Dec 06 '12 at 00:15
  • This will not solve the problem, the content still doesn't clear the breadcrumbs and is still shifted. Plus inline css is very bad form unless absolutely necessary. – Godwin Dec 06 '12 at 00:18
  • @Godwin Sorry about the inline CSS; you could alternatively use a class to clear instead. The OP's question explicitly dealt with shifting the divs below; the positioning of the breadcrumbs is a different problem imo. – irrelephant Dec 06 '12 at 00:22
  • Oops, I missed that this is an additional div, so it will solve the problem, it's just an necessary additional element when you can add this styling to the content element itself. – Godwin Dec 06 '12 at 00:22