Joseph Jung February 2016

How to make the div over the image

 <div style="border-style:solid; margin:auto;">
   <div style="position:absolute;">
     <div style="background:yellow; border-style:dotted; height:300px; width:300px">
       <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
     </div>
   </div>
   
   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>
 
 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.

Answers


SHBelsky February 2016

I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?


oli-ver February 2016

I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:

 <div style="border-style:solid; margin:auto;min-height:80%">
   <div style="position:absolute;">
 <div style="background:yellow; border-style:dotted; height:300px; width:300px">
   <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
 </div>
   </div>

   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>

 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:

<html>
<head>
</head>
<body>
    <div style="border-style:solid; margin:auto">
       <div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
             <div style="border-style:dotted; height:400px; width:600px">

             </div>
       </div>
     </div>

     <div style="border-style:solid">
       <h2> THIS IS THE FOOTER</h1>
     </div>
 </body>
 </html>

Post Status

Asked in February 2016
Viewed 1,216 times
Voted 5
Answered 2 times

Search




Leave an answer