I am working on a site where I have a header that contains:
- Company logo (image wrapped in h1 on left)
- Site wide navigation bar (styled ul, middle right)
- Catchy slogan (h4, bottom right)
I have an example page that can be viewed at:
The sample page has a screen cap under the actual header showing
the relationship of the elements as intended. If you resize the
page, or resize the text the "catchy slogan" jumps around and gets
quite out of control at some sizes. I think I have overcomplicated
the markup and styles for the header (all styles in head of page
for the sample page).
How can I better contain the contents of the header div?
Should I be using a different unit of size for the text parts?
I'm not sure why I'm having so much trouble with this, but I seem
to have some sort of stylers block ;-)
Thanks in advance for all help rendered.
I'm not sure if my original request hit the list at a bad time
or something on Friday but I only got one reply (thanks Roy) and
I can't really use the suggested <br /> since it adds whitespace
that doesn't belong.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/