Search code examples
htmlcsspositioningcss-float

CSS - 1. Header does not scale 2. Floated text is not on the same baseline

At this fiddle, you can see a header-bar with a title on the left and some text on the right. The problem should be obvious,

  1. the header-bar does not scale with the full site, only with the visible part
  2. The right-floated text sticks to the top of the header and is not on the same baseline as the title.

How can I fix this? Is there a better way to achieve what I want to do?

Clarification: With "the header does not scale" I mean that it does not have a width of 750px as defined in #header because the page is too small.

Solution

  • A few things:

    • No need for a float-clearing element. Just add overflow: auto; to the container.
    • Use max-width instead of width, as it scales nicely.

    Try this: http://jsfiddle.net/PkkU8/7/