0

I'm making a website for a extreme sports company for a school project, I want to showcase the sports by having a picture followed by some text in a container like element. I am relatively new to HTML and CSS.

Here is the HTML 

<div class="sports" "spacing"> 
    <img src="images/skydive.jpg" class="thumbnail" alt="" /> 
    <p class="float" > Skydiving is one of those things everybody wants to experiance and is on many peoples bucket list. It is the ultimate thrill hurtaling towards the earth with no restrictions. We have a number of techniques avalible including         Tandem, Static line and solo! </p> 
</div>

And the CSS 

.sports {
    height:230px;
    width:900px;
    background-color:#f1f1f1;
    margin-right:auto;
    margin-left:auto;
    margin-bottom: 20px;
    display:table;
}

.thumbnail {
    max-height: 200px;
    margin-top:15px;
    margin-bottom:15px;
    margin-left: 15px;
    display:inline-block;
}

.float {
    text-align:center;
    display:inline-block;
    width:410px;
    position:relative;
    top:-71px;
    padding-left:80px;
}

I've played around with these settings and they work for this one, But its specific to the image size and amount of text and i dont really wanna have to play around doing the same thing for another 6 different things.

Thanks

howderek
  • 2,224
  • 14
  • 23
Tom Turner
  • 1
  • 1
    [How do I vertically align text next to an image with CSS?](http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css). – Vucko Mar 08 '13 at 19:07

1 Answers1

1

I'm not quite sure what you are trying to get, but probably easier way would be to give your image "float" option and remove float from the text (relative positioning should be unnecessary). When text is displayed inline it will use space around the image, respecting image margin.

smarta
  • 21
  • 2