CODEWITHSUNDEEP
htmlcssimageheaderalignment
HappyHands31
HappyHands31

Reputation: 4101

How To Place Two Images Side By Side In Header

I need to place two images next to each other in the header. One is a logo and one is a banner image - the logo is a link back to the home page. The header has the background-color red, so once the banner is added, most of the header will be hidden except for a thin line of red at the bottom. I tried this:

CSS:

div.container {
  display:inline-block;
}

HTML:

<header>
<div class="container">
<a href="index.html><img class="logo" src="images/logo.jpg" height="110"
width="200"></a>
</div>
<div class="container">
<img class="banner" src="images/banner.jpg" height="110" width="800">
</div>

But it did not work. Here is a screenshot showing the web page. The Banner should go just to the right of the logo "Sean's"enter image description here

After trying this: 

div.container {
display:inline-block;
Width:auto!important;
}

enter image description here

Link to full HTML, CSS, and Javascript: http://jsfiddle.net/HappyHands31/kzbvLheq/

Upvotes: 1

Views: 6651

Answers (3)

Alex
Alex

Reputation: 8695

The width of images(.banner and .logo) are bigger than their parent(header) so the .banner goes to the second line. you can reduce the size of .banner(for example 200)

link

Upvotes: 3

Elipzer
Elipzer

Reputation: 911

Your problem is in this line of code:

<a href="index.html>

You forgot to close the quotation marks after the href tag. You should replace it with

<a href="index.html">

Otherwise, your code works fine.

Full Code: (Note Change in Line 3)

<header>
    <div class="container">
        <a href="index.html"><img class="logo" src="images/logo.jpg" height="110"
        width="200"></a>
    </div>
    <div class="container">
        <img class="banner" src="images/banner.jpg" height="110" width="800">
    </div>
</header>

Another suggestion that I do have for you is to make the images inline-block instead of putting a container div around them. It works the same way and you have less elements in your code.

CSS

img {
    display: inline-block;
}

JSFiddle: http://jsfiddle.net/5v2a317d/

Upvotes: 2

CreativePS
CreativePS

Reputation: 1093

Try this out, hopefully this will resolve your issue.. If you still face any problem, please show the entire code or URL

div.container {
  display:inline-block;
  Width:auto!important;
}

Upvotes: 2

Related Questions