I realize this is probably about as rudimentary of a CSS question as it gets, but I seem to be stuck. I’d like the blog description text that reads “web designer + trombonist = future billionaire” to sit on top of the gray nav menu box just as it does now, except floated all the way to the right (leaving space under the “logo” text). When I add “float right” to the css of the description div, the text falls into the gray nav menu box, rather than sitting on top it. I read the CSS Box Model article, as well as the All About Floats article so if someone could point me to the section that should have helped me, that’d be a bonus. Thanks in advance for your help! I look forward to learning.
Here’s the site: http://jamesyardley.com
My PHP/HTML:
My CSS:
/* Header */
h1#logo {font-size: 32px; font-family: Arial; font-weight: lighter;}
h1#logo a {color: #333; text-decoration: none}
#description {float: right; font-family: Georgia; font-variant: small-caps; font-size: 16px;}
/* Nav */
#menu-bar {width: 100%; background-color: #eee;}
ul#nav {font-family: Arial, sans-serif; font-size: 12px; list-style-type: none; margin: 0; padding: 0; overflow: hidden;}
ul#nav li {float: left;}
ul#nav li a:link {color: #333; display: block; width: auto; text-align: center; padding: 5px; text-decoration: none;}
ul#nav li a:visited {color: #333;}
ul#nav li a:hover {background-color: #ccc;}
