Jump to content

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


NikMac
 Share

Recommended Posts

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

Edited by NikMac
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...