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

Recommended Answers

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, …

Jump to Post

All 3 Replies

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

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

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 learning and sharing knowledge.