CODEWITHSUNDEEP
html
Psypher
Psypher

Reputation: 10829

Image alignment issue in html

I am creating a small page using html which has a header and a body. The header is within a tag with blue background.

The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header.

I don't want to use CSS to align the image.

Click Run Code Snippet to view the current page layout

<html>
<body>

<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
  <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
  <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
  <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
</div>

<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>

<i><p>Sent from gmail</p></i>
</div>
</body>
</html>

Upvotes: 0

Views: 702

Answers (4)

michaelpri
michaelpri

Reputation: 3651

I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are.

Instead of 

<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>

<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">

Do 

<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height-->

<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>

You also have some a wrong double quote in this line

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook.

You can do this without using CSS on your images by simply moving the second image before the first one within the HTML.

<html>
<body>

<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
  <img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
  <img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
  <div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
</div>

<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>

<i><p>Sent from gmail</p></i>
</div>
</body>
</html>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

jsBin demo

Learn to use <style>. Makes life easier and more time to drink coffee with friends.

Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)

<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline

    <style>
        .float-left{ float:left;}
        .float-right{float:right;}

        #header{
            width:400px;
            height:60px;
            border:1px solid blue;
            background-color:#2196F3;
        }
        #header img{
            height:50px;
        }
        #header h3{
            font-size:20px;
            color:white;
        }
        #content{
            width:400px;
            height:400px;
            border:1px solid blue;
        }
    </style>

HTML

    <div id="header">
        <img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
        <h3  class="float-left">Something</h3>
        <img class="float-right" src="http://www.sona-systems.com/img/android.png">
    </div>

    <div id="content">
        <p>
            Hey,<br>
            I am on vacation. I will respond after i come back
        </p>
        <p><i>Sent from gmail</i></p>
    </div>

Another solution would be to place your images right inside the H3 element

<h3><img> Some Text <img></h3>

but than you need to play with the H3's line-height and the image's vertical-align etc.

Upvotes: 1

sideroxylon
sideroxylon

Reputation: 4416

I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row:

<html>

<body>

  <div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3">
    <img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
    <div style="font-size:20px;color:white; text-align:left; float:left">
      <h3>Something</h3>
    </div>
    <img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png">
  </div>

  <div style="width:400px;height:400px;border:1px solid blue">
    <p>
      Hey,
      <br>I am on vacation. I will respond after i come back</p>

    <i><p>Sent from gmail</p></i>
  </div>
</body>

</html>

Upvotes: 2

Related Questions