Quoting Peter Williams <PWilliams@xxxxxxxxxx>:
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 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
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 can see the problem that you mention. That header4 appears to be rendered
directly to the right of the navigation menu.
To give a not-most-elegant solution, add a line break to your HTML:
<h4>Quality suppliers of stuff and nonsense to industry since 1965</h4>
I can confirm that it looks like the your caption under Firefox and Konqueror.
Hope it helps,
Roy S. Schestowitz