Question

I wanted to make my email as image, so I’ve put text and then email address as image. After that line goes another line, which is text and link on the same line.

But the problem is that for some reason second line (with text and link) is being formated with parameters on the first line, even though it is not on same div tag. I don’t get it why it is being formated at all (when I delete first line and all formating for it, then www:link goes on one line as it should). I can only bypass it by using:

<br /> // or another spacings such as padding-bottom.

But I want spacings between lines to be minimal.

To make it more clear here is a screenshot, how it is looking now:

html code:

<div class="col3">
Email:
<img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/>
</div>
<div>
 www: <a href="http://www.test.com/">http://www.test.com</a>
 </div>

css styles:

 .col3 { 
width:140px; 
height:15px;
padding-bottom:10px;
 }

 .image-align {
float:right; 

  }

Also I’m using wordpress, but I have raw html plugin and tried raw tags and also disabled all wordpress formating, but it is the same thing.
Does anyone know what could be wrong?

What I want to do is second line should look like this:

www: http://www.test.com

Not like this:

wwww:
http://www.test.com

Answer 1

You can try this:

HTML

<div class="col3">
  <div class="email">Email:</div>
  <img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div>
<div class="sitelink">www: </div>
<div class="link"><a href="http://www.test.com/">http://www.test.com</a> </div>

CSS

.col3 {
    padding-bottom:10px;
}
.email {
    float:left
}
.image-align {
    display:inline-block;
    margin-left:5px
}
.sitelink {
    float:left
}
.link {
    display:inline-block;
    margin-left:5px
}

DEMO