CODEWITHSUNDEEP
htmlcss
SomeStudent
SomeStudent

Reputation: 3048

Issues with text-align

I am having some issues with text-align = top; in my CSS. What I want is to have the paragraph element, be aligned at the top, and to the right of my image. It works fine on the first line, but the second line is still beneath my image. I tried also doing horiz-align; but that didn't do it for me.

The W3C page I was looking at is as follows: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

the CSS code is below: 

img.top {
    vertical-align: text-top;
}

And this is the part of the HTML, which I am trying to manipulate. 

<p>
<img class = top src="../images/myImage.gif" alt="A curious stack question"/>
    Many questions <br/>
    Are most certainly to come
</p>

I suspect part of the issue is the <br/> as without it the text does get aligned to the top; but I do require the <br/> in that location for formatting. I was thinking of using <pre>; but I am not sure if that would be the best solution.

Upvotes: 0

Views: 41

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

How tied are you to that structure? You could do this instead:

HTML:

<img class="top" src="..img/img.jpg"/>
<p>
    Many questions <br/>
    Are most certainly to come
</p>
<div class="clear"></div>

CSS:

img.top {
  float: left;
}

.clear {
  clear: both;
}

FIDDLE: https://jsfiddle.net/6pwry2nn/

Upvotes: 1

Related Questions