Help with positioning 3 images in header

[reisende76]

Hello all,

I am trying to take our website from a table based HTML skeleton to a CSS layout and had a question regarding a way to position three images as I would like to in our header bar. What I have now is this:

What I would like is something like this, with the "Live Help" button toward the top of the parent element and centered to the height of the myStaffingPro logo:

Here is the HTML and CSS I have so far.

HTML:

<div id="content">
	<div id="mainHeading">
		<div class="floatLeft"><img border="0" src="images/mystaffingpro.gif"></div>
      <div class="floatRight"><a href=#'><img src='images/LivePersonIcon.gif' name='hcIcon' width=120 height=36 border=0></a><a href='#' target='_blank'><img src='images/LivePersonPoweredBy.gif' width=106 height=35 border=0></a>
		<img height="67" src='[URL unfurl="true"]https://client.hrservicesinc.com/downloads/images/mhbwhite(1).jpg'></div>[/URL]
      <!--BEGIN Main Menu -->
      <script language="JavaScript1.2">generate_mainitems()</script>
      <!--END Main Menu -->
   	&nbsp;&nbsp;HR Services Inc.
		<script language="JavaScript">
		var lpPosY = 150;
		var lpPosX = 100;
		</script> 

	   <!-- BEGIN HumanTag Monitor for LIVE PERSON. DO NOT MOVE! MUST BE PLACED JUST BEFORE THE /BODY TAG -->
	   <script language='javascript' src='[URL unfurl="true"]https://server.iad.liveperson.net/hc/78977965/x.js?cmd=file&file=chatScript3&site=78977965&category=en;woman;1'>[/URL]
	   </script><!-- END HumanTag Monitor. DO NOT MOVE! MUST BE PLACED JUST BEFORE THE /BODY TAG -->

	</div>
</div>

Relevant CSS:

#content {
	margin-top: 10px;
	margin-left: 2%;
	margin-right: 2%;
	padding: 10px;
	background-color: #FFF;
	color: #000;
}
#mainHeading {
	position: relative;
	width: 100%;
	height: auto;
	text-align: left;
	border: 1px solid;
}
.floatLeft {
	float: left;
}

Any help would be greatly appreciated.

Thanks!

 

[Vragabond]

You need to start simplifying.

I would remove the divs -- you can float the images themselves.

I would probably put the image of the mountain as a background to the header element and use padding on that element to assure other elements don't overlap the mountain.

Then I would float the logo to the left and the button to the right. Using that, they should both appear to the top. Paddings and margins can help with precision positioning.


___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]