Move Image to right in the same line

Question

I’ve found an online template

I did some edits in the template, but not sure how to move the image. How is actually:

How I want:

This is my code:

/* reset */

*
{
	border: 0;
	box-sizing: content-box;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: top;
}

/* content editable */

*[contenteditable] { border-radius: 0.25em; min-width: 1em; outline: 0; }

*[contenteditable] { cursor: pointer; }

*[contenteditable]:hover, *[contenteditable]:focus, td:hover *[contenteditable], td:focus *[contenteditable], img.hover { background: #DEF; box-shadow: 0 0 1em 0.5em #DEF; }

span[contenteditable] { display: inline-block; }

/* heading */

h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }

/* table */

table { font-size: 75%; table-layout: fixed; width: 100%; }
table { border-collapse: separate; border-spacing: 2px; }
th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
th, td { border-radius: 0.25em; border-style: solid; }
th { background: #EEE; border-color: #BBB; }
td { border-color: #DDD; }

/* page */

html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; padding: 0.5in; }
html { background: #999; cursor: default; }

body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

/* header */

header { margin: 0 0 0em; }
header:after { clear: both; content: ""; display: table; }

header h1 { background: #3499DB; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
header address { float: right; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; }
header address p { margin: 0 0 0.25em; }
header span, header img { display: block; float: left; }
header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
header img { max-height: 100%; max-width: 100%; }
header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; }

/* article */

article, article address, table.meta, table.inventory { margin: 0 0 3em; }
article:after { clear: both; content: ""; display: table; }
article h1 { clip: rect(0 0 0 0); position: absolute; }

article address { float: left; font-size: 125%; font-weight: bold; }

/* table meta & balance */

table.meta { float: left; width: 36%; }
table.balance { float: right; width: 36%; }
table.meta:after, table.balance:after { clear: both; content: ""; display: table; }

/* table meta */

table.meta th { width: 40%; }
table.meta td { width: 60%; }

/* table items */

table.inventory { clear: both; width: 100%; }
table.inventory th { font-weight: bold; text-align: center; }

table.inventory td:nth-child(1) { width: 26%; }
table.inventory td:nth-child(2) { width: 38%; }
table.inventory td:nth-child(3) { text-align: right; width: 12%; }
table.inventory td:nth-child(4) { text-align: right; width: 12%; }
table.inventory td:nth-child(5) { text-align: right; width: 12%; }

/* table balance */

table.balance th, table.balance td { width: 50%; }
table.balance td { text-align: right; }

/* aside */

aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
aside h1 { border-color: #999; border-bottom-style: solid; }

/* hide */
tr.Hidden {
  visibility: hidden;
}

/* javascript */

.add, .cut
{
	border-width: 1px;
	display: block;
	font-size: .8rem;
	padding: 0.25em 0.5em;	
	float: left;
	text-align: center;
	width: 0.6em;
}

.add, .cut
{
	background: #9AF;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
	background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
	border-radius: 0.5em;
	border-color: #0076A3;
	color: #FFF;
	cursor: pointer;
	font-weight: bold;
	text-shadow: 0 -1px 2px rgba(0,0,0,0.333);
}

.add { margin: -2.5em 0 0; }

.add:hover { background: #00ADEE; }

.cut { opacity: 0; position: absolute; top: 0; left: -1.5em; }
.cut { -webkit-transition: opacity 100ms ease-in; }

tr:hover .cut { opacity: 1; }

@media print {
	* { -webkit-print-color-adjust: exact; }
	html { background: none; padding: 0; }
	body { box-shadow: none; margin: 0; }
	span:empty { display: none; }
	.add, .cut { display: none; }
}

@page { margin: 0; }

<html>
	<head>
		<meta charset="utf-8">
		<title>Invoice</title>
		<link rel="stylesheet" href="style.css">
		<link rel="license" href="https://www.opensource.org/licenses/mit-license/">
		<script src="script.js"></script>
	</head>
	<body>
		<header>
			<h1>REPORT</h1>
			<span><img alt="" src="https://s3.amazonaws.com/appforest_uf/f1538843538357x222297661006450660/asdw.jpg"></span>
		</header>
		<article>
			<h1>Recipient</h1>
			<table class="meta">
				<tr>
					<th><span>ID#</span></th>
					<td><span>101138</span></td>
				</tr>
				<tr>
					<th><span>Date</span></th>
					<td><span>January 1, 2012</span></td>
				</tr>
				<tr>
					<th><span>Location</span></th>
					<td><span>Germany</span></td>
				</tr>
				<tr>
					<th><span>User</span></th>
					<td><span>Me</span></td>
				</tr>
			</table>
    			<table class="inventory">
				<thead>
					<tr>
						<th><span contenteditable>Item</span></th>
						<th><span contenteditable>Description</span></th>
						<th><span contenteditable>Rate</span></th>
						<th><span contenteditable>Quantity</span></th>
						<th><span contenteditable>Price</span></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
						<td><span contenteditable>Experience Review</span></td>
						<td><span data-prefix>$</span><span contenteditable>150.00</span></td>
						<td><span contenteditable>4</span></td>
						<td><span data-prefix>$</span><span>600.00</span></td>
					</tr>
				</tbody>
			</table>
			<a class="add">+</a>
			<table class="balance">
				<tr>
					<th><span contenteditable>Total</span></th>
					<td><span data-prefix>$</span><span>600.00</span></td>
				</tr>
				<tr>
					<th><span contenteditable>Amount Paid</span></th>
					<td><span data-prefix>$</span><span contenteditable>0.00</span></td>
				</tr>
				<tr>
					<th><span contenteditable>Balance Due</span></th>
					<td><span data-prefix>$</span><span>600.00</span></td>
				</tr>
			</table>
		</article>
		<aside>
			<h1><span contenteditable>Additional Notes</span></h1>
			<div contenteditable>
				<p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
			</div>
		</aside>
	</body>
</html>

I've tried to move the span with the image from the header to the article with the table but no luck.

Any ideas? What you recommend me, to move the image from the header?

Answer 1

Just wrap with a <div>

Wrap all contents in the header with <div>. Add a class name. Eg:- if your class name is right, then add float: right.

Do the same process for <article>. and add float:left.

Problem is solved.

Answer 2

The problem is that you need to make use of float in relation to <article>, but you want it to apply only to the image, and not to the <header>. To get around this, you'll want to shift the <span> and <img> outside of <header> (just below it - above <article>). Then it's just a matter of applying float: right to the image:

<header>
  <h1>REPORT</h1>
</header>
<span><img alt="" src="https://s3.amazonaws.com/appforest_uf/f1538843538357x222297661006450660/asdw.jpg"></span>
<article>
....

img {
  float: right;
}

This can be seen in the following:

/* reset */

* {
  border: 0;
  box-sizing: content-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: top;
}


/* content editable */

*[contenteditable] {
  border-radius: 0.25em;
  min-width: 1em;
  outline: 0;
}

*[contenteditable] {
  cursor: pointer;
}

*[contenteditable]:hover,
*[contenteditable]:focus,
td:hover *[contenteditable],
td:focus *[contenteditable],
img.hover {
  background: #DEF;
  box-shadow: 0 0 1em 0.5em #DEF;
}

span[contenteditable] {
  display: inline-block;
}


/* heading */

h1 {
  font: bold 100% sans-serif;
  letter-spacing: 0.5em;
  text-align: center;
  text-transform: uppercase;
}


/* table */

table {
  font-size: 75%;
  table-layout: fixed;
  width: 100%;
}

table {
  border-collapse: separate;
  border-spacing: 2px;
}

th,
td {
  border-width: 1px;
  padding: 0.5em;
  position: relative;
  text-align: left;
}

th,
td {
  border-radius: 0.25em;
  border-style: solid;
}

th {
  background: #EEE;
  border-color: #BBB;
}

td {
  border-color: #DDD;
}


/* page */

html {
  font: 16px/1 'Open Sans', sans-serif;
  overflow: auto;
  padding: 0.5in;
}

html {
  background: #999;
  cursor: default;
}

body {
  box-sizing: border-box;
  height: 11in;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.5in;
  width: 8.5in;
}

body {
  background: #FFF;
  border-radius: 1px;
  box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
}


/* header */

header {
  margin: 0 0 0em;
}

header:after {
  clear: both;
  content: "";
  display: table;
}

header h1 {
  background: #3499DB;
  border-radius: 0.25em;
  color: #FFF;
  margin: 0 0 1em;
  padding: 0.5em 0;
}

header address {
  float: right;
  font-size: 75%;
  font-style: normal;
  line-height: 1.25;
  margin: 0 1em 1em 0;
}

header address p {
  margin: 0 0 0.25em;
}

header span,
header img {
  display: block;
  float: left;
}

header span {
  margin: 0 0 1em 1em;
  max-height: 25%;
  max-width: 60%;
  position: relative;
}

header img {
  max-height: 100%;
  max-width: 100%;
}

header input {
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* article */

article,
article address,
table.meta,
table.inventory {
  margin: 0 0 3em;
}

article:after {
  clear: both;
  content: "";
  display: table;
}

article h1 {
  clip: rect(0 0 0 0);
  position: absolute;
}

article address {
  float: left;
  font-size: 125%;
  font-weight: bold;
}


/* table meta & balance */

table.meta {
  float: left;
  width: 36%;
}

table.balance {
  float: right;
  width: 36%;
}

table.meta:after,
table.balance:after {
  clear: both;
  content: "";
  display: table;
}


/* table meta */

table.meta th {
  width: 40%;
}

table.meta td {
  width: 60%;
}


/* table items */

table.inventory {
  clear: both;
  width: 100%;
}

table.inventory th {
  font-weight: bold;
  text-align: center;
}

table.inventory td:nth-child(1) {
  width: 26%;
}

table.inventory td:nth-child(2) {
  width: 38%;
}

table.inventory td:nth-child(3) {
  text-align: right;
  width: 12%;
}

table.inventory td:nth-child(4) {
  text-align: right;
  width: 12%;
}

table.inventory td:nth-child(5) {
  text-align: right;
  width: 12%;
}


/* table balance */

table.balance th,
table.balance td {
  width: 50%;
}

table.balance td {
  text-align: right;
}


/* aside */

aside h1 {
  border: none;
  border-width: 0 0 1px;
  margin: 0 0 1em;
}

aside h1 {
  border-color: #999;
  border-bottom-style: solid;
}


/* hide */

tr.Hidden {
  visibility: hidden;
}


/* javascript */

.add,
.cut {
  border-width: 1px;
  display: block;
  font-size: .8rem;
  padding: 0.25em 0.5em;
  float: left;
  text-align: center;
  width: 0.6em;
}

.add,
.cut {
  background: #9AF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: -moz-linear-gradient(#00ADEE 5%, #0078A5 100%);
  background-image: -webkit-linear-gradient(#00ADEE 5%, #0078A5 100%);
  border-radius: 0.5em;
  border-color: #0076A3;
  color: #FFF;
  cursor: pointer;
  font-weight: bold;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.333);
}

.add {
  margin: -2.5em 0 0;
}

.add:hover {
  background: #00ADEE;
}

.cut {
  opacity: 0;
  position: absolute;
  top: 0;
  left: -1.5em;
}

.cut {
  -webkit-transition: opacity 100ms ease-in;
}

tr:hover .cut {
  opacity: 1;
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }
  html {
    background: none;
    padding: 0;
  }
  body {
    box-shadow: none;
    margin: 0;
  }
  span:empty {
    display: none;
  }
  .add,
  .cut {
    display: none;
  }
}

@page {
  margin: 0;
}

img {
  float: right;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Invoice</title>
  <link rel="stylesheet" href="style.css">
  <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
  <script src="script.js"></script>
</head>

<body>
  <header>
    <h1>REPORT</h1>
  </header>
  <span><img alt="" src="https://s3.amazonaws.com/appforest_uf/f1538843538357x222297661006450660/asdw.jpg"></span>
  <article>
    <h1>Recipient</h1>
    <table class="meta">
      <tr>
        <th><span>ID#</span></th>
        <td><span>101138</span></td>
      </tr>
      <tr>
        <th><span>Date</span></th>
        <td><span>January 1, 2012</span></td>
      </tr>
      <tr>
        <th><span>Location</span></th>
        <td><span>Germany</span></td>
      </tr>
      <tr>
        <th><span>User</span></th>
        <td><span>Me</span></td>
      </tr>
    </table>
    <table class="inventory">
      <thead>
        <tr>
          <th><span contenteditable>Item</span></th>
          <th><span contenteditable>Description</span></th>
          <th><span contenteditable>Rate</span></th>
          <th><span contenteditable>Quantity</span></th>
          <th><span contenteditable>Price</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a class="cut">-</a><span contenteditable>Front End Consultation</span></td>
          <td><span contenteditable>Experience Review</span></td>
          <td><span data-prefix>$</span><span contenteditable>150.00</span></td>
          <td><span contenteditable>4</span></td>
          <td><span data-prefix>$</span><span>600.00</span></td>
        </tr>
      </tbody>
    </table>
    <a class="add">+</a>
    <table class="balance">
      <tr>
        <th><span contenteditable>Total</span></th>
        <td><span data-prefix>$</span><span>600.00</span></td>
      </tr>
      <tr>
        <th><span contenteditable>Amount Paid</span></th>
        <td><span data-prefix>$</span><span contenteditable>0.00</span></td>
      </tr>
      <tr>
        <th><span contenteditable>Balance Due</span></th>
        <td><span data-prefix>$</span><span>600.00</span></td>
      </tr>
    </table>
  </article>
  <aside>
    <h1><span contenteditable>Additional Notes</span></h1>
    <div contenteditable>
      <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
    </div>
  </aside>
</body>

</html>