bobby123 bobby123 - 2 years ago 142
HTML Question

HTML, CSS picture positioning

I'm working on a html page, and i 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 cant move the picture into the right side(red area) of the header.

the things should met at the same time:

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 height are 100px)

the header is 800x100px and the icture is 160x100 px

I'm looking for the easiest / simplest way to solve it, and i can modify anything in my htlm or css code.

just to be sure: the header is with the "TITLE TITLE TITLE TITLE" and it is blue

css code:

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;

html code:

<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="style.css"/>
<div id = "container">
<div id = "header">
<h1><center>TITLE TITLE TITLE TITLE</center><h1>
<div id = "headerpics">
<img src= "images/book.jpg">
<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