Search code examples
css-floatcentering

Centering text with clear after two floats

Two questions for this fiddle...

  1. Why doesn't the middle text move under the left and right texts even though it has clear: both assigned to it?
  2. Why doesn't the middle text go to the middle of the footer even with margin: 0 auto?

I did manage to get the text to the middle under left and right but I had to use a separate div around the <h7 id="middle">. Is there a way around it?

Solution

  • I'll be more precise. <h7> doesn't exist, so it is rendered as an inline element... So clear doesn't affect it!

    (And you'll have to use text-align:center; instead of margin:auto;, unless you use a specified width)