CODEWITHSUNDEEP
htmlcssalignment
Sowmya
Sowmya

Reputation: 26969

extra space with h1 tag

There is unknown space when I add the h1 tag above the p tag.

Here is the fiddle

What I need is here in the below image

enter image description here

After considering float:left, I tried it in my real page but it still gives problem

Here is the new code with float:left

Fiddle with float

Upvotes: 1

Views: 1039

Answers (7)

Michael Koper
Michael Koper

Reputation: 9771

I would use position absolute for the thumb. and put margin-left to the h1 and p tag. http://jsfiddle.net/CKRNs/13/

h1, p{
margin: 0 0 0 60px; 
}

.thumb{
  position:absolute;
  width:50px;
  height:50px;
}

Upvotes: 0

Wouter J
Wouter J

Reputation: 41934

The problem: Incorrect use of display:inline-block;

Solution: Remove all display:inline-block; and vertical-align:top; occurences and give .thumb float:left; (the correct way of aligning block elements next to eachother).

Example: http://jsfiddle.net/CKRNs/9/

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to float and remove display inline-block;

   p {
        width: 80%;
        vertical-align: top; margin:0 
    }
    h1{
        font-size:14px; 
        margin:0; 
        vertical-align:top;

    }
    .thumb{
    float:left;
        height:100px    
    }

Demo

Upvotes: 1

Luke Robertson
Luke Robertson

Reputation: 1652

.thumb{
    display:inline-block;
    height:100px;
        float:left; 
}

This means the image will float left and allow the text to wrap

Upvotes: 0

otinanai
otinanai

Reputation: 4025

You need to set your image float:left. See this demo: http://jsfiddle.net/CKRNs/14/

Upvotes: 0

Raul Rene
Raul Rene

Reputation: 10270

Add a float:left; to the p, h1 and .thumb definitions.

Upvotes: 0

Mathew Thompson
Mathew Thompson

Reputation: 56429

That's because you have given your thumb class (which is your image) a height of 100px. Simply removing that height will fix it, see Fiddle: http://jsfiddle.net/CKRNs/4/

EDIT: As you've also said you want the p tag next to the image, add float: left to both the p tag and the thumb class, like so: http://jsfiddle.net/CKRNs/6/

Upvotes: 1

Related Questions