Center text across multiple divs

I am having a problem centering text in a table header that uses divs to place a rounded corner image on the left side of the header and a gradient fade image on the right side of the header.  As the header expands or shrinks based on the user's browser width, this leaves a varying width between the images in which to place the header text.  I can center the header text within this varying amount of space, however, I want to center the text across the entire header width, including the width of both images.

For example, the left corner image is 14 px wide and the right gradient  image is 140px wide.  If the header width is 800px total, the header text is centered in the available 646px.  What I would like to do is center it in the entire 800px.

Any ideas?

CSS:

table.contentmodule {
      width:100%;
}
th.contentmodule {
      width:100%;
      padding: 0px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 11px;
      background-color: #cccccc;
}
.cmhleft {
      float: left;
      background-image: url(common/images/gray_corner_14.gif);
      background-repeat: no-repeat;
      width: 14px;
      height: 14px;
}
.cmhright {
      float:right;
      background-image: url(common/images/gray_gradient_140.gif);
      background-repeat: no-repeat;
      width: 140px;
      height: 14px;
}
.cmhtext {
      width: 100%;
      text-align: center;
}
td.contentmodule {
      width:100%;
      padding: 5px 5px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 11px;
}

HTML:

      <table class="contentmodule">
            <tr>
                  <th class="contentmodule">
                        <div class="cmhleft"></div><div class="cmhright"></div>Some Other Committee
                  </th>
            </tr>
            <tr>
                  <td class="contentmodule">
                        Some other committee information.....<br>
                        Some more other committee information.....<br>
                        Still more other more information.....<br>
                        <a href="#" class="contentmodule">A link.....</a><br>
                        <a href="#" class="contentmodule">Another link.....</a><br>
                        <a href="#" class="contentmodule">Yet another link.....</a>
                  </td>
            </tr>
      </table>

Thanks.

Alan Pollenz
alanpollenzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

prunckleCommented:
alan,

Will this work for your purposes?  Add:
.cmhtext2 {
      width: 100%;
      text-align: center;
	  z-index:1; 
}
 
and
 
            <tr>
                  <th class="contentmodule">
				        <div class="cmhtext2">Some Other Committee</div>
                        <div class="cmhleft"></div><div class="cmhright"></div>
                  </th>
            </tr>

Open in new window

0
boro_bobCommented:
Have you tried adding a margin-right: 126px to your cmhleft class to effectivly make it the same size as your right hand image?
0
alanpollenzAuthor Commented:
prunckle,

Your solution effectively placed the header on two lines, they first being a full width box, background #cccccc, with centered text, the second being the desired background (corner, #cccccc center area, and gradient) without text.

boro_bob,

Your solution was partially effective, in that it provided the desired result, centering text, but effectively reduced the area available for the header text by 280 pixels. This then causes a problem when there are 2 columns in a relatively narrow display and the entire header might only be 400 - 500 px wide and the header text is more than about 10 characters.  In this case, it causes the header text to wrap.

In Firefox, the addition of white-space: nowrap; to th.contentmodule solved this by allowing the text to float over the cmhright div.  In IE, the entire block of text was pushed down to a second line in the header, and in Safari the result was to push the cmhright div into the next column to the right.

Alan
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

boro_bobCommented:
Here we go...

Delete your <div class="cmhright"></div> and just add the background image to your

th.contentmodule with 14px padding on the right like so:
th.contentmodule {
      width:100%;
      padding: 0px 14px 0px 0px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 11px;
      background-color: #cccccc;
      background-image: url(common/images/gray_gradient_140.gif);
      background-repeat: no-repeat;
      background-position: top right;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
alanpollenzAuthor Commented:
Thanks boro_bob.  You made life easy!

Alan
0
boro_bobCommented:
Glad I could help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.