CODEWITHSUNDEEP
htmlcss
user2957214
user2957214

Reputation: 119

div containing another div and an image getting unexpected height

Here, the div definition is supposed to get the same height as the image's. but i'm getting and additional 4 pixels for the height. do anyone have an idea why this is happening?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <img src="29.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>

body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }

Upvotes: 0

Views: 205

Answers (3)

gilchris
gilchris

Reputation: 1241

This problem is caused by default img tag margin.

add to css

.container img { display:block; float:left; }

please see this solution. => Wrong height of div with img tag inside

Upvotes: 0

Arjun
Arjun

Reputation: 361

It works perfectly fine. All you need to do is put the css codes under 

<style>

your codes

</style>

I have Replaced your img with the following link. It is also an image. 

<img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />

It is displayed with its original size.

Full Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>

<style>
body {
    margin: 0;
}

html, body {
    height: 100%;
}

.container {
    position: absolute;
}

.definition {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: 0;
}

    .definition:hover {
        opacity: 1;
        transition: 2s ease-in;
    }
</style>
<body>
    <div class="container">
        <img src="http://ww1.prweb.com/prfiles/2011/06/14/8571472/ingredients_icon-kerned.jpg" />
        <div class="definition">
            DEFINITION GOES HERE
        </div>
    </div>
</body>
</html>

Upvotes: 0

Pradyumna Challa
Pradyumna Challa

Reputation: 1145

Include a CSS reset . It may be a browser problem .

Upvotes: 2

Related Questions