DIVs overlapping. Need to move it over so they don't

Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.

You can view the site t开发者_运维百科hat im having issues on here.

---

If the error is the Fatal Error. Check Code. bit at the top, then do this

Change

#newscontent {
top: 4px;
left: 14%;
position: fixed;
}

to

#newscontent {
top: 4px;
left: 18%;  //CHANGE HERE
position: fixed;
}

This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.

Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.

---

only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right

---

OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:

First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.

Second, on all three of those divs, add a menu-item class:

<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>

Third, add the following CSS to your style sheet:

.menu-item {
    float: left;
    font: bold 120% Arial,Helvetica,sans-serif;
    margin-left: 15px;
    padding-top: 3px;
    text-decoration: none;
}