CODEWITHSUNDEEP
htmlcsscss-position
efpies
efpies

Reputation: 3725

Image and text on one line with text (but text moved a bit up)

I have to implement the next thing.

What

An image and a text should be pinned down to bottom. Also they should be on one line, but a text should be 10px up relative to an image. It's all ok (because img tag has display: inline property), but I can't deal with this text stuff.

If I place a text in a div with position: absolute; bottom: 0, it'll overlap an image. If I make it position: relative; float: left;, it won't be pinned to the bottom of the block. Also I can't make it position: absolute with the left property set to the width of an image, because it can vary.

I can't even make a correct search request to find what I need. What can be done there?

Upvotes: 0

Views: 122

Answers (3)

user2320601
user2320601

Reputation: 162

    body, p, div{
    margin:0px;
    padding:0px;
    }
    div{
        position:relative;
        background:blue;
    }
    img{
        background:red;
        display:inline;
        width:200px;
        height:200px;
        margin-right:20px;

    }
    p{
        display:inline;
        position:absolute;
        bottom:10px;
    } 



    <body>
      <div id='x'>
        <img src='image'/>
        <p> Text </p>
      </div>
    </body>

Upvotes: 1

Sam Braslavskiy
Sam Braslavskiy

Reputation: 1288

there are several ways to do that. if it's really a text, try to apply css:

.text{line-height:200px}
/*you can adjust the line-hight to best suit your needs (100px or whatever)*/

you can also apply style="display:inline-block" to the text, that'll allow you to use margins and paddings (e.g. margin-bottom:10px \ padding-bottom:10px etc.) please, note, that for cross browser (incl. old IEs) display:inline-block you should write something like this:

.text{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding-bottom:10px;
}

*the first line is for the old mozilla, matter of taste, it can be ommited. zoom:1 and *display:inline is for old IEs (like 7 or 8)... it's not quite valid markup, but works perfect, so, no worries

Upvotes: 2

Praveen
Praveen

Reputation: 56509

Don't use absolute positioning, and try adding below css to the text

vertical-align: top;

Find the difference between JSFiddle and JSFiddle2

Upvotes: 0

Related Questions