Member Avatar for Michael_93

Hi All,

Its been years I have done any css and even then I wasnt very good at it. However I have decided that I am going to have another crack at it. I am trying to put a div on top of a div to look like the below example:

https://ibb.co/MRQp5tg

my css

/*Outer Div*/
    .header{
        position: relative;
        float:left;
        overflow: hidden;

     /*inner div */  

    .float{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
        float:right;

    }

Any ideas, I have tried playing around with the postioning, but cant get it to work.

Thanks

  • 4 Contributors
  • 3 Replies
  • 675 Views
  • 9 Months Discussion Span
  • Latest Post Latest Post by Purvi_1
Member Avatar for gentlemedia

There's no need to use absolute positioning for this. In fact it's better to never use absolute positioning to layout webpages. You will run in all sorts of problems.

Having said that. We have now in 2018 much better mechanisms to layout webpages such as CSS Flexbox and CSS Grid, but since you haven't worked with CSS for a long time, I've used in my example a float as well. Also I don't know what kind of content is going inside that inner div, but anyways here's one way to do this.

https://codepen.io/gentlemedia/pen/XoNqJR

commented: Nice +5
Member Avatar for Sherin Mathew

Try This code:

<html>
<head>
<style>
    .float{z-index:10;}
    .float,.header{

      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;

    }
</style>
</head>
<body>

    <div class="header">First Div
        <div class="float">
            Second Div
        </div>
    </div>
</body>
</html>
commented: Nope! -1
Member Avatar for Purvi_1

try bellow code :

HTML:

   <div class = "first_div"></div> 
   <div class = "second_div"></div>

CSS:

            .first_div {
                border: 4px solid black;
                position: absolute;
                width: 500px;
                height: 200px;      
            } 

            .second_div { 
                 border: 4px solid black;
                 position: relative;
                 width: 212px;
                 height: 130px;
                 top: 30px;
                 left: 240px;
            }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.