The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS newbie css div float help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #33083

    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:

    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;}

    After reading the section about clearing floats more carefully, I’ve resolved my issue. Thanks for the great article, Chris!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.