Search code examples
htmlcssimagealignment

Multiple lines of text next to image (CSS-HTML)

I am trying to put 2 lines of text next to an image, sort of like this

_________
|       | Line one of text
| image |
|       | Line two of text
---------

This is the code that I have so far

<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
    <br>
    <span class="ban2">Line 2 of text</span></p>

 .banner p {
  font-family: "Gentium Basic";
  font-size: 19px;
  text-align: center;
  color: #aaa;
  margin-top: -10;
  display: block;
 }
.banner img {
  float: center; 
    margin: 5px;
 }
 .banner span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }
  .banner .ban2 span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }

But currently it does this:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.

Solution

  • There's no such thing as float: center; You can choose either left, right, or none.

    http://jsfiddle.net/vd7X8/1/

    If you float: left; on the image it will do what you're after.

    If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.