Search code examples
htmltextoffset

How to offset text without offsetting background-img


I wish to offset text from its' current position so the margin is 20 px in from the left side. I have tried putting everything after "from students" in a table, as follows: and that just removed all the text altogether.

In essence, I have a thin image about 200 px wide and 1000 px tall. I need this text to be indented about 20 px so it doesn't look so sloppy. Any ideas?

Let me know if I'm missing any criteria.

<div class="right" style="background-image: url(/images/gala_r3_c2.jpg); height: 1000px; width: 225px;  position: relative; ">  
    <h1>FROM STUDENTS</h1>
    <br>
    <i>CONTENT HERE</i>
    <br><br>
    <div id="topmenu"><b><a href="thanks.html"> &#62; FOR MORE</a></div>
</div> 

Solution

  • Add a 20px padding to the left of your containing div:

    <div class="right" 
     style="padding-left:20px; 
      background-image: url(/images/gala_r3_c2.jpg);
      height: 1000px;
      width: 225px;
      position: relative; ">
    

    You might want to adjust padding around the the other sides of the div in the same way to improve appearance.

    Incidentally, is there a specific reason why the styling is in-line and not in a style sheet?