CODEWITHSUNDEEP
htmlcss
Ranadheer Reddy
Ranadheer Reddy

Reputation: 4324

text wrapping below image

I have a small image and i have to show some text beside that image. for that i have used the below html and css.

<div class="main">
   <img alt="image"/>
   <h2>this is heading text. This is heading text. This is heading text</h2>
</div>


.main{
    border:1px solid black;
    height:200px;
    width:400px;
    padding:20px;
}
h2{
    display:inline;
}

it is showing like this

enter image description here

The second line is wrapping below the image. I have to get the second line just below the first line not below the image.

I tried using float also. but not working. please help.

I created a fiddle so you can edit it easily: http://jsfiddle.net/codingsolver/MtqHh/1/

Upvotes: 0

Views: 87

Answers (4)

Bryan Kerr
Bryan Kerr

Reputation: 46

A good way of achieving this is shown on an updated fiddle:

http://jsfiddle.net/y5ewr/1/

The advantage is highlighted in the use of overflow:hidden on the <h2>. This means that if the <img> is not in place the heading will flow full width and no margins are needed on the heading element.

Upvotes: 1

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

.main{
        border:1px solid black;
        height:200px;
        width:400px;
        padding:20px;
        display: inline-flex;
    }
.main img{
    float: left;
    width: 50px;
    height: 50px;
}

h2{
    float:left; 
    margin-left: 50px;
    text-align: left;
    display: inline-block;
    padding;0px;
    margin:0px;
    }

use this code usefull for you. and see this link http://jsfiddle.net/bipin_kumar/MtqHh/10/

Upvotes: 1

Ming
Ming

Reputation: 4588

You could simply float the image, and push the h2 across with a left margin.

http://jsfiddle.net/MtqHh/8/

img { float: left; }

h2{ margin: 0 0 0 50px; }

Upvotes: 1

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you

   .main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
  }
   h2{
      display: flex;
    }
   img{
    float:left;
  margin-right:10px;
  }

Working demo http://jsfiddle.net/MtqHh/13/

Upvotes: 1

Related Questions