Position a logo using CSS

SteveH · 03-07-2013, 05:52 PM

Hello

I have downloaded a nice free-for-use template and I am in the process of customisng parts of it.

However, try as I may I cannot position my logo correctly. I have two H3 headers (one under the other and both left-aligned) as follows:

Quote:

H3 HEADER HERE

ANOTHER H3 HEADER HERE

Ideally, what I would like to do is place a small image to the right of these two H3 headers:

Quote:

H3 HEADER HERE
--------------------------------------------------> image (100px X 100px)
ANOTHER H3 HEADER HERE

In my HTML I have this:

Code:

<header>
	  <div id="banner">
	    <div id="welcome">
	      <h3>Name <span>Name continued</span></h3>
	    </div>
	    <div id="welcome_slogan">
	      <h3>Slogan here</h3>
	    </div>			
	  </div>
    </header>

I have tried to absolutely position the logo - to no avail.

May I attach the CSS file?

Thanks.

Steve

Excavator · 03-07-2013, 07:17 PM

Hello SteveH,
Look at how floats and clears can arrange that for you -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
header {
	width: 800px;
	margin: 30px auto;
	overflow: auto;
	background: #999;
}
header h3 {
	margin-left: 10px;
	float: left;
	clear: left;
}
	header h3 span {color: #0f0;}
header img {
	margin: 10px 10px 0 0;
	float: right;
	display: block; /*demo only*/
	background: #f00; /*demo only*/
}
</style>
</head>
<body>
	<header>
			<img src="image.jpg" width="400" height="100" alt="description">
		<h3>Name <span>Name continued</span></h3>
		<h3>Slogan here</h3>
	</header>
</body>
</html>

SteveH · 03-07-2013, 09:02 PM

Hello Excavator

Thanks to you, using this:

Code:

<style type="text/css">

}
header h3 {
	margin-left: 10px;
	float: left;
	clear: left;
}
	

header h3 span {color: #b7b7b7;}
header img {


	margin: 10px 10px 0 0;
	float: right;
	display: block; /*demo only*/
	background: #f00; /*demo only*/
}
</style>


</head>

<body>

  <div id="main">

<header>

  <div id="banner">
	    <div id="welcome">
			<img src="images/wolf_howling2.jpg" width="85px" height="85px" alt="logo">
		<h3>Name <span>Productions</span></h3>

 </div><!--close welcome-->
	    <div id="welcome_slogan">
	      <h3>Slogan here</h3>
	    </div><!--close welcome_slogan-->			
	  </div><!--close banner-->
		
	</header>

Has generated the attached - just as I wanted!

Thank you ever so much!

Steve