Home/ Questions/Q 5997441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:15:52+00:00

I’ve added an image to a div and the height has been adjusted automatically.Then,

  • 0

I’ve added an image to a div and the height has been adjusted automatically.Then, I floated the image to the left and move the image to the top using relative positioning..However, the bg height remains the same. How can I decrease the height automatically?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS(4)</title>
<style type="text/css">
#bg{width:1500px;background-color:#FCF;overflow:auto;}

#bg img{float:right;position:relative;top:-50px;}

 </style>
</head>

<body>

<div id="bg">
<img src="../../Desktop/produitsnonalimentaires/images/Produitsalimentaire.png" />
 </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using a negative top margin on the image instead of the top:

    #bg img {
    float: right;
    margin-top: -50px;
}

    For example: http://jsfiddle.net/ambiguous/k2Rq7/1/

    Setting top on a relatively positioned element doesn’t move the element’s box, it just adjusts where the element is displayed with respect to that box:

    For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).

    So the element’s box takes up its usual space (specifically the height in your case) and the outer <div> doesn’t shrink to match the image’s displayed position. Using a negative margin-top actually moves the image and that effectively reduces its height and the height of the containing <div>.

    • 0