Center an image

I'm trying to make a header, left image, middle image and right image. But I can't find the way

.topbandl { background-image: url(images/l_header.png);  float: left; font-size: 10px; height:105px; position: relative; width: 20px;}
.topbandm { background-image: url(images/header_bg.png);  margin:auto; font-size: 10px; height:105px; position: relative; width: 879px; }
.topbandr { background-image: url(images/r_header.png);  float: left; font-size: 10px; height:105px; position: relative; width: 19px; }

Code (markup):

In the php

<div class="topbandl">
  <div class="topbandm">
<div class="topbandr"></div>

Code (markup):

THANKS

 

#topband { display: table; }
.topbandl { background-image: url(images/l_header.png);  font-size: 10px; height:105px; position: relative; width: 20px; display: table-cell; }
.topbandm { background-image: url(images/header_bg.png);  margin:auto; font-size: 10px; height:105px; position: relative; width: 879px; display: table-cell; }
.topbandr { background-image: url(images/r_header.png);  font-size: 10px; height:105px; position: relative; width: 19px; display: table-cell; }

Code (markup):

<div id="topband">
  <div class="topbandl"></div>
  <div class="topbandm"></div>
  <div class="topbandr"></div>
</div>

Code (markup):

you may also need to add vertical-align: top; if you want to line them up (on each)

 

Perhaps something like this:

.topband { 	
		margin: auto; 
                width: 918px; 
}
.topbandl, .topbandm, .topbandr { 	
		float: left; 
		position: relative;
    		font-size: 10px; 
}
.topbandl { 	
		background: url(images/l_header.png) no-repeat;
    		height:105px; width: 20px; 
}
.topbandm { 
		background: url(images/header_bg.png) no-repeat;
    		height:105px; width: 879px; 
}
.topbandr { 
		background: url(images/r_header.png) no-repeat;
    		height:105px; width: 19px; 
}

Code (markup):

<div class="topband">
  <div class="topbandl"></div>
  <div class="topbandm"></div>
  <div class="topbandr"></div>
</div>

Code (markup):

 

Thanks, code worked, rep added.
Is there any way to make the width of topbandm automatic, example if the monitor is 700 px then covers 700 px, if is 300 PX covers 300 px, etc.

Also one more thing, an image in front of the topbandl (Logo)(With link)

THANKS A LOT!
Best Regards

 

Have you tried using percentages, instead of fixed width?

 

Well atm that isn't important, I tried using the same code for the footer


PHP

<div id="footerdesign">
  <div class="footerdesignl"></div>
  <div class="footerdesignm"></div>
  <div class="footerdesignr"></div>
		<?=$lang['Footer'];?></div>

Code (markup):

CSS

#footerdesign { display: table; }
.footerdesignl { background-image: url(images/l_footer.png);  font-size: 10px; height:105px; position: relative; width: 20px; display: table-cell; }
.footerdesignm { background-image: url(images/footer_bg.png);  margin:auto; font-size: 10px; height:105px; position: relative; width: 999px; display: table-cell; }
.footerdesignr { background-image: url(images/r_footer.png);  font-size: 10px; height:105px; position: relative; width: 19px; display: table-cell; }

Code (markup):

But the text (lang['Footer']) appears at the right instead of infront of the background footer.

Thanks a lot

 

Just a note on this to GotOwned, Filmfidlers code is actually better than previosuly suggested, particularly cross-browser. Not sure how high IE 6/7/8 is on your agenda but FilmFidler's code will be much more stable cross-browser.

Can you let me know what that php footer tag is actually outputting? it may need an addition element wrapper to be aligned the way you want it.

 

you would have to use % instead of fixed pixel width. to make it 700px from the start, you would have to measure the pixels in your browser first.

if you want it to be maximum 700 pixels, place it inside a div code where the maximum width is 700px.


edit: thanks for the +rep also.
and if you need anymore help, please let me know via PM. I just so happened to check back at this thread because I received the +rep