css - oversized div within small div - css

Question

I need to make a menu that looks like this:
The upper entries need to have a right margin of (lets say) 20px.
Problem arises, when I add the sub-menus, especially like the red one with the «large Menu-Entry». The top menu needs to stay in place and all the sub-menus need to be centered under that top menu. But either the top-entry is enlarged (which makes the green part shift to the right) or the sub-entries aren't positioned at the center of the top-entry...
As the menu-entries are dynamic, I can't predict how wide they are and thus I can't apply any math.
Also - the sub-entries are only visible, if the user is on the according page (means - the green part only shows «Menu1» if the user is on the red page)
I «could» use some javascript to do it after the page loaded, but I'm trying to avoid that.
I tried all sorts of stuff, including negative margins and whatnot - but nothing seems to work... Any ideas?
[edit]
some html here - tried to fumble around like crazy with no results (except the one from Brad, but that one doesn't work with IE)
<div class="center">
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
</div>
CSS:
.menu-container{
width: 100px;
float: left;
}
.menu-items, .menu-title{
text-align: center;
}

Answer 1

If you don't care about IE: Have you tried using display:table-cell?
You could try something like:
<div class="menu-container">
<div class="menu-title">
Menu1
</div>
<div class="menu-items">
<div class="menu-item">large menu item</div>
<div class="menu-item">sub</div>
<div class="menu-item">sub</div>
</div>
</div>
With CSS:
.menu-container {
display : table;
width: 100px;
}
.menu-title, .menu-items {
display : table-cell;
width: 100%;
text-align: center;
}
Naturally, the content within the table-cells will wrap to 100px.

Answer 2

My first approach uses different html mark-up to your own, but gives the visual effect you you're looking for with, perhaps, a slight increase in semantics:
html:
<dl>
<dt>Title One</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
<dl>
<dt>Title Two</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
css:
dl {
width: 100px;
float: left;
position: relative;
text-align: center;
color: #0f0;
}
dl:nth-child(odd) {
color: #f00;
}
Demo of the above at JS Fiddle.
Edited, to add the following:
On looking at your posted mark-up, and applying the css:
.menu-container {
width: 100px;
float: left;
text-align: center;
overflow: hidden;
color: #0f0;
}
.menu-container:nth-child(odd) {
color: #f00;
}
JS Fiddle demo
I'm not sure why you're experiencing difficulties. Admittedly, at the moment, I'm only able to test on Chrome and IE 8 (Win XP), but the above seems to work. Am I missing something important in your problem description?