bobby123 bobby123 - 7 months ago 16
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: https://i.imgsafe.org/2c4d808.png

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.



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

#header{
height: 100px;
background-color: #6495ED;
}

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

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

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

#footerwords{
float: right;
}

#headerpics{
positioning: absolute;
top: 0px;
}



ul{
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="http://placehold.it/160x100/E8117F/ffffff/?text=Books" />
</div>
</div>
<div id = "main">xx t xx </div>
<div id = "menu">
<ul>
<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>
</ul>
</div>
<div id = "footer">
<div id = "footerwords">
<strong></br>footer........<strong>
</div>
</div>
</div>




Answer

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;
  height:139px;
  background-color: #9cc;
}
.masthead-img {
  position: absolute;
  right: 0;
  top: 0;
}
<div class="masthead">
  <h1>This is My Title</h1>
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg" alt="" class="masthead-img" />
</div>