CODEWITHSUNDEEP
htmlcss
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

HTML:Adjust height between br element

In the given fiddle, I want first word align to the top of the image and second aligned at the bottom of the image. http://jsfiddle.net/himanshuy/W6ATN/15/

I have tried line-height for the span and margin for the br element but nothing seem to work.

Upvotes: 0

Views: 92

Answers (1)

Travis J
Travis J

Reputation: 82277

I re-arranged some of your html. First, I put the img element and the two span elements in their own divs. So there are two inline divs. I also added a style to one of the spans. You can see the end result here: http://jsfiddle.net/W6ATN/17/

In case that fiddle fails, here is the markup:

html

<div class="box">
 <div class="logo">
  <div class="inlineDiv">
   <img src="c:\work\img\logo3.jpg" width="80" height="80" />
  </div>
  <div class="inlineDiv">
      <span class="spanTop">YAD</span>
      <span>HIM</span>
  </div>
 </div>
</div>​

css

div.box {
  background-color: #000000;
  color: #FFFFFF;
  width: 300px;
  height: 400px;
  text-align: center;    
}

img {
margin-top:20px;
}

.inlineDiv
{
 display:inline;
}

.spanTop
{
 margin-top:10px;
 position:absolute;
}

span {
 font-size: 30px;
 color: red;
 clear:both;
 line-height:45px;
}

Upvotes: 2

Related Questions