[SOLVED] css tables

[M.O.S. Studios]

Hey guys,

I'm trying to make a menu that consists of 3 parts,

1 left side 20wx40h image

2.contents *800wx40 black square with the option inside

3.right side 20wx40h image

 

* 800 minimum but will expand if content expands..

 

and the whole thing to be centered,

i know how to do this in tables but I'm trying to embrase the future off css and it killing my brain

 

any ideas thanks in advance

 

the css

.menu_ph{
display:inline-table;
width:800px;
height:40px;
background: transparent;
text-align: center;
}

.menusides{
display:table-cell;
width:20px;
height:40px;
}

.menucontent{
display:table-cell;
width:800px;
height:40px;
background:#000;
text-align: center;
font-family: Comic Sans MS, san sarif, Arial;
font-size:30px;
font-weight:heavy;
font-color:#ffffff;
}

.menucontent a{
text-decoration: underline;
}

 

the html

<div class='menu_ph'>
<div class='menusides'><img  src='images/menu/left.png'></div>
<div class="menucontent"><?php echo MENUS; ?></div>
<div class='menusides'><img  src='images/menu/right.png'></div>
</div>

[Axeia]

I've recently added http://layouts.ironmyers.com/ to my bookmarks, quite sure the layout you're after will be somewhere on there as well

[M.O.S. Studios]

the css

.menu_ph { display:block; width:100%; border:0px;}

.menu_rows { display:block; height:100%; white-space:nowrap; clear:left;}

.menu_leftcell{
display:block;
float:left;
height:40px;
width: 34%;
white-space: normal;
}

.menu_cell {
display:block;
float:left;
height:40px;
width: 32%;
white-space: normal;
}

.menu_cell #cellinfo
{
height:40px;
line-height:40px;
background:#000;
text-align: center;
font-family: Comic Sans MS, san sarif, Arial;
font-size:30px;
font-weight:heavy;
font-color:#ffffff;
}

 

 

<div class="menu_ph">
  <div class="menu_rows">
    <div class="menu_leftcell" style="text-align:right; "><img src='images/menu/left.png'></div>
    <div class="menu_cell" style="text-align:center; "><div id='cellinfo'><?php echo MENUS; ?></div></div>
    <div class="menu_cell" style="text-align:left; "><img src='images/menu/right.png'></div>
  </div>
</div>