Div tag layout using box and position properties

Exact Instructions to follow

Use div tag (alone) to implement the layout on the imgur link provided below. Box properties & position properties can also be used.

My interpretation of the above instruction and the image provided is...

There should be a container whose top width is 70% and bottom is 30%, that is split by two elements that are floated on the right side. The first (upper element) A nested image that is 30% width, 50% height. The second (lower element) is a nested p element that is 70% width 50% height.

I believe that this is difficult to explain and would be better understood with a wireframe layout of what is expected.

Here is a picture of the expected layout https://i.sstatic.net/MHCyP.jpg

I'm sure there are better and easier ways to accomplish this task but I have to stick to the requirements provided in the instruction.

Here is the code that I have so far.

div {
    float: left;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}

div > img {
    float: right;
    width: 30%;
    height: 50%;    
    border: 1px solid red;
}

.div p {
    float: right;
    margin-left: 30%;
    width: 30%;
    height: 50%;
    border: 1px solid blue;
}
HTML

<div>
    <p>Text in Black</p>
    <img src="image1.jpg" width="150px" height="150px" alt="Image1">
    <p>Text in Blue</p>
</div>

Solution

This should fix your issue, Sorry this is my first answer on this website so it may be a tad rusty.

I've cleared the body padding and margin since some browsers implement by default. Then proceed to make 3 div's with id's to your needs, The tricky bit is the "blue" div, to make it work you use absolute position and set top 50% left 30% and it appears over the "black" div and under the "image" div.

Hope this helps you.

HTML

<head>
<title> Dewbe Div layout with CSS3 </title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="black"> </div>

<div id="image"> </div>

<div id="blue"> </div>

</body>

CSS

body {

    width:100%;
    height:100%;
    margin:0;
    padding:0;
   }

#black {

    background-color:black;
    width:70%;
    height:100%;
    float:left;
}

#image {

    background-color:yellow;
    float:right;
    width:30%;
    height:50%;
 }

#blue {

    background-color:blue;
    width:70%;
    height:50%;
    float:right;
    position:absolute;
    top:50%;
    left:30%;
}