Home/ Questions/Q 8412513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:41:17+00:00

I need to draw something like this using html and css. I am not

  • 0

I need to draw something like this using html and css. I am not able to do so.

          _____________________
          |      |      |     |  
          |______|      |_____|
          |                   |  
          |______        _____|
          |      |       |    |
          |______|_______|____|

I created a major div, an outer rectangle and then created 4 nested divs, smaller rectangular. For the left side 2 i made them to float left and the other 2 float to right. But it is not something that i want. Can someone please let me know what should be done.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use absolution positioning to achieve this. The absolution position of each inner div would have two of top, left, right, or bottom set to 0.

    Here’s an example:

    <html>
    <head>
        <title>CSS Based layouts</title>

        <style type="text/css">
            #rect {
              width: 300px;
                height: 300px;
                position: relative;
              border: 1px solid black;
            }

            #topleft {
              position: absolute;
              top: 0;
                left: 0;
              border: 1px solid black;
            }

            #bottomleft {
              position: absolute;
              bottom: 0;
                left: 0;
              border: 1px solid black;
            }

            #topright {
              position: absolute;
              top: 0;
                right: 0;
              border: 1px solid black;
            }

            #bottomright {
              position: absolute;
              bottom: 0;
                right: 0;
              border: 1px solid black;
            }

        </style>

    </head>
    <body>
        <h1>CSS Based layouts</h1>
        <p></p>

        <div id="rect">

            <div id="topleft">
                Top and Left
            </div>
            <div id="bottomleft">
                Bottom and Left
            </div>
            <div id="topright">
                Top and Right
            </div>
            <div id="bottomright">
                Bottom and Right
            </div>

        </div>

    </body>
</html>
    • 0