bobby123 bobby123 - 1 year ago 60
HTML Question

How to position an image to the right of a center aligned title with HTML & CSS

I'm working on a HTML page, and I've run into a little problem. Here's a picture about what I want:

I've got a header section which contains the title and the picture, but I can't move the picture into the right side (red area) of the header.

I need to meet these conditions:

  1. The title and the picture must be in the same div (header), however I can use nested divs in the header.

  2. The title must be centered.

  3. The picture must be completely on the right side of the header (both have a height of 100px).

The header is 800x100 px and the picture is 160x100 px.

I can modify anything in my HTML or CSS code.

Just to be clear: The header is with the "TITLE TITLE TITLE TITLE" and it is blue.

width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding: 10px;
background-color: #cccccc;
box-shadow: 0px 0px 20px black;

height: 100px;
background-color: #6495ED;

width: 150px;
height: 400px;
background-color: #FFD700;
float: left;

width: 650px;
height: 400px;
background-color: #00FF00;
float: right;

height: 80px;
clear: both;
background-color: #6495ED;

float: right;

positioning: absolute;
top: 0px;

font-size: 1.5em;
font-family: arial;

<div id="container">
<div id="header">
<h1><center>TITLE TITLE TITLE TITLE</center><h1>
<div id = "headerpics">
<img src="" />
<div id = "main">xx t xx </div>
<div id = "menu">
<li><a href = "index.html">1111111</a></li>
<li><a href = "#">2222222</a></li>
<li><a href = "#">33333333</a></li>
<li><a href = "#">4444444</a></li>
<li><a href = "#">5555555</a></li>
<div id = "footer">
<div id = "footerwords">

Answer Source

give the <div> that holds the text/img a position: relative;

then give the <img> a position: absolute; top: 0; right: 0;

h1 {
  text-align: center;
.masthead {
  position: relative;
  background-color: #9cc;
.masthead-img {
  position: absolute;
  right: 0;
  top: 0;
<div class="masthead">
  <h1>This is My Title</h1>
  <img src="" alt="" class="masthead-img" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download