How do I align 4 different size divs in a box shape, so that green one can be put in the corner-CodePudding

How do I align these divs so the green one goes to the left corner between red and yellow divs? adding some random text because it won't let me edit saying "It looks like your post is mostyl code; please add some more details."

<!DOCTYPE html>
<html>
    <head><link href="style.css" rel="stylesheet" type="text/css"></head>
    <body>
        <div id='red'></div>
        <div id='blue'></div>
        <div id='yellow'></div>
        <div id='green'></div>
    </body>
</html>

#red
{ 
    background-color: red;
    height:500px;
    width: 25%;
    float: left;
}

#blue
{
    background-color: blue;
    height: 150px;
    width:75%;
    float: left;
}

#green
{
    background-color: green;
    height: 300px;
    width: 25%;
    float: left;
}

#yellow
{
    background-color: yellow;
    height:650px;
    width:75%;
    float: left;
}

Reference Image :

CodePudding user response：

You could use float: right; for your blue and yellow div :

#red
{ 
    background-color: red;
    height:500px;
    width: 25%;
    float: left;
}

#blue
{
    background-color: blue;
    height: 150px;
    width:75%;
    float: right;
}

#green
{
    background-color: green;
    height: 300px;
    width: 25%;
    float: left;
}

#yellow
{
    background-color: yellow;
    height:650px;
    width:75%;
    float: right;
}

<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<div id="green"></div>

CodePudding user response：

To set the green one in the corner just specify the alignment positions for each div.This would bring the green to the left most corner.Specify the correct alignment for each colors.I have provided the code for your reference

<style>
#red
{ 
    background-color: red;
    height:500px;
    width: 25%;
    float: left;
}

#blue
{
    background-color: blue;
    height: 150px;
    width:75%;
    float: right;
}

#green
{
    background-color: green;
    height: 300px;
    width: 25%;
    float: left;
}

#yellow
{
    background-color: yellow;
    height:650px;
    width:75%;
    float: right;
}
</style>
 <head>
<link href="style.css" rel="stylesheet" type="text/css"></head>
<body>
    <div id='red'></div>
    <div id='blue'></div>
    <div id='yellow'></div>
    <div id='green'></div>
</body>