Getting my title inline with Navigation

Discussion in 'CSS' started by dahouse, Dec 3, 2009.

0
  1. #1
    Hey guys,

    I'm trying to build a website for a friend of mine and I'M having a bit of difficulty getting the navigation bar to be inline and beside my site's title WITHIN the masthead/header div. When I try to add the "display: inline; " property to the div containing the title (not the header) remove the line break menu can appear in line, the title div becomes disfigured.

    The site is on the test server here:
    http://chat.carleton.ca/~cdelahou/wright/

    the CSS file:
    http://chat.carleton.ca/~cdelahou/wright/main.css

    I'm trying to get the menu that's currently underneath the title to go beside the title.

    Thanks
     
    dahouse, Dec 3, 2009 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    kk5st, Dec 3, 2009 IP
  3. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Float your #TitleContainer left:
    float: left;

    That will allow your navigation div to wrap up next to it.

    You will need to add a height to your header div to keep it from collapsing.
    height: 70px;

    Last, you will need to add some margin to your navigation div
    margin: 30px;
    margin-left: 300px;
     
    jwitt98, Dec 3, 2009 IP
  4. dahouse

    dahouse Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Could you elaborate on this. I'm somewhat familiar with margins collapsing but I don't know how your suggestion applies to it.

    Do you mean this for aesthetic purposes?

    Thanks alot
     
    dahouse, Dec 3, 2009 IP
  5. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    When you float an element, in this case an element inside your header div, then that element is taken out of the normal flow of the page. If there is no other element to hold the containing div's height, then the div will collapse. Assigning a static height to your containing div will prevent it from collapsing. You may want to instead assign a min-hieght if you think your header might expand from page to page, but in most case the header stays the same height on every page in the site.

    Yes, unless you want your nav bar to be butted up directly against to top of your title container. These setting can be adjusted. The values I gave you should put your navigation links in the ballpark area.
     
    jwitt98, Dec 4, 2009 IP