CODEWITHSUNDEEP
htmlcss
Jake Nemo Brogan
Jake Nemo Brogan

Reputation: 17

Alignment of image an <p> tag

I have an image of a map, and I want to add the address to the right hand side of it, I can't seem how to figure it out. Can any one help, this is the part of the coding I'm using:

<div id="main">
<span style="margin-top:5px;
        margin-left:5px;
              text-align:right;">
       <h1 align="center" style="font-size:40px;"><span style="color:red;">Contact</span><span style="color:#FFFFFF;"> Us</span></h1>

  <img id="map" src="images/map.png" title="Image of Map for Krazie Needles." align="centre" />
<p align="left" style="margin-left:5px;
          margin-top: 5px;">
    45 Station Road

with the css code

       #main
{

    margin-top:42px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background:rgba(16,16,17,0.70);
    height:85%;
    width:90%;
    box-shadow: 3px 3px 2.5px #888888;
    border-radius:5px;
}   

img#map
{
    margin-left:5px;
    border-radius:5px;
    border-style:solid;
    border-width:2px;
    border-color:#FFFFFF;
}

I want to align the < p > tag next to the image.

Upvotes: 1

Views: 15990

Answers (4)

Aniket
Aniket

Reputation: 9758

I have tried to maintain your styling but have removed all inline styles.

#main
{
    margin: 42px auto;
    position:relative;
    background:rgba(16,16,17,0.70);
    width:90%;
    box-shadow: 3px 3px 2.5px #888888;
    border-radius:5px;
}   

h1 {
    text-align: center;
    color: #fff;
    font-size: 2em;
}

.red {
    color: red;
}

.map
{
    display:inline;
    margin: 0 5px 0;
    border-radius:5px;
    border-style:solid;
    border-width:2px;
    border-color:#fff;
}

.address {
    display:inline;
    vertical-align: top;
}​
<div id="main">
<h1><span class=red>Contact</span> Us</h1>
<img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." />
<p class=address>45 Station Road</p>
</div>​

Upvotes: 2

SVS
SVS

Reputation: 4275

You should add float:left to image css. If you want to put the address on Map you have to add position:absolute to paragraph with address css.

Upvotes: 0

PauliL
PauliL

Reputation: 1269

In the img tag, change the (incorrect) align="centre" to align="left".

(Note, there is no center attribute on img tag.)

Upvotes: 1

Jeroen
Jeroen

Reputation: 63749

You can use float: left; on the image tag (see float at W3.org), or place the image inside the <p>.

Upvotes: 1

Related Questions