Aligning A <div> (banner Image) With Heading And Other <div>

[NikMac]

Hi,This is partially tied in to my other question, which received no response...I am trying to center an image in between a <h1> element and another div. Currently the heading displays underneath the image and div, not in-line with them. How can I fix this? Here is the code:HTML:

	<div id="header">		<div id="header-inner">			<div id="search"></div>			<div id="banner"></div>			<h1>Heading</h1>		</div>[/HTML]CSS:[Code]h1 { font: bold 2em Arial,Tahoma,Geneva,Helvetica,sans-serif; padding: 25px 0 25px 0; color: #555; background: transparent }#header {	height:111px;	width:960px;	margin:0;	padding:0;}#header-inner {	height: 54px;	width: 960px;	padding:10px;}#banner {background: #FFF url(../images/banner.jpg) no-repeat bottom center; height:54px; width:224px; margin: 0 auto;}

Please ask if you have any questions. Your help is appreciated.Nik

[thescientist]

are you saying you want them all to appear next to each other on one line?: #search, #banner, <h1>

[jeffman]

#search and the h1 will also need widths defined, and all three of the "inline" items will need a float property (float:left usually does it).

[NikMac]

are you saying you want them all to appear next to each other on one line?: #search, #banner, <h1>

-Yes, but in this order: <h1>, #banner, #search. H1 floating to left, #banner in center (or, preferably, to the right of h1) and #search floating right.

#search and the h1 will also need widths defined, and all three of the "inline" items will need a float property (float:left usually does it).

Sorry, but can you show me? I tried adding widths (should it be the full 900px site or just the width of the object?) and float:left to them (float:right to searchbox) but it did not change much.Thanks.

[jeffman]

I kept the banner width as you defined it. The other two widths I guessed at. The important thing is that they add up to 960px. Any additions to left-right margin, padding, or border in those elements will have to be deducted from their width to keep the total within 960px.You cannot use the margin: 0 auto trick to center an item that is floated on the same "line" with other items. But since you know the exact width of that item and its container, you can use fixed pixel definitions to center it.

#search {   float: left;   width: 368px;}#banner {   background: #FFF url(../images/banner.jpg) no-repeat bottom center;   height:54px;   width:224px;   /* margin: 0 auto; disabled */   float: left}h1 {   font: bold 2em Arial,Tahoma,Geneva,Helvetica,sans-serif;   padding: 25px 0 25px 0;   color: #555;   background: transparent;   float: left;   width: 368px;   /* just to be sure: */   margin: 0;}