How can I make these elements line up correctly using CSS?

Answer 1

I would use either absolute positioning (left, top) or floats (padding-left, padding-top, float:left); not a combination of both.

By the way: That applies not only to the menu but also to the title on the right side.

Answer 2

Remove position:absolute from #menuitem, and add a top padding to #menu

#menu
{
    position:relative;
    width: 940px;       
    height:40px;  /* remember that height + padding = total height */
    padding-top:50px; /* adjust as necessary to push the tabs and text down */
}

#menuItem
{
    padding-left: 50px;
    float: left;
    width: 600px;
}

Answer 3

For the titleText div, you should be able to just give it margin...

.titleText { float: right; color:#209202; font-size:22px; font-style:italic; font-family:Georgia; font-weight:bold; margin: 50px 40px 0 0; }

incase you didnt already know, when you list off 4 parameters for margin, they are designated as follows...

margin: TOP RIGHT BOTTOM LEFT

As to Joel Potter's answer, I would have to agree, take away the absolute positioning from #menuItem, but also, you then do NOT need 'position: relative' designated to #menu anymore.

Its only purpose seemed to be keeping #menuItem relative to #menu, but without it being absolutely positioned now there is no need for it.

Answer 4

this is very easy, but requires a small change to your html, because you'll need place the Dashboard text above the menu.

you need to think about this kind of code:

<div id="mainmenu">
    <h1>Dashboard</h1> 
    <ul>
     <li><a href="/dashboard/"><img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /></a></li>
     <li><a href="/placements/"><img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /></a></li>
     <li><a href="/messages"><img alt="Messages" src="/Content/Images/Messages_white.png" /></a></li>
     <li><a href="/reports"><img alt="Reports" src="/Content/Images/Reports_white.png" /></a></li>
     <li><a href="/admin"><img alt="Admin" src="/Content/Images/Admin_white.png" /></a></li>
    </ul>
</div>

this'll allow you to make your CSS a lot easier, as you can simply float the h1 to the right (declare it as a block) and the ul to the left

after this, you can simply add the needed margins paddings and other stying.