This is an archived thread from the StopByte developer forum — browse all archived threads. StopByte is now a payments & ecommerce toolkit — check out our free calculators.

Stopbyte

How draw rectangle with css and eight divs

Web Development CSS
#1

hi all i have a html code with eight divs that 4 divs each have same id and i want use css only and no change on html and js is it possible make it overlaping? need complete css code . i use any css code but alway rectangle are not overlaping?

hi all i have a html code with eight divs that 4 divs each have same id and i want use css only and no change on html and js is it possible make it overlaping? need complete css code . i use any css code but alway rectangle are not overlaping?
> 

    <div id='l1'></div>
    <div id='l1'></div>
    <div id='l1'></div>
    <div id='l1'></div>
    <div id='l2'></div>
    <div id='l2'></div>
    <div id='l2'></div>
    <div id='l2'></div>
    </board>
#2

Do you seriously need 8 divs? Here’s a short way but it doesn’t have 8 divs.

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
 
</body>
</html>
2 Likes
#4

all you have to do is to use The Grid system:
I don’t know what is the container holding these divs so I guessed it was Board!

board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4,1fr);
    height: 5rem;
    width: 5rem;
}

dont forget to give the divs some padding!

board div{
   display: block;
   background: red;
   padding: 5px;
}

and that’s it. Enjoy! :wink:

1 Like
#5

if you don’t have any Container for those divs you can use this CSS code.
note you can adjust size as you see them fit.

  #l1, #l2 {
    width: 22rem;
    background: red;
    height: 2rem;
   }

and this is probably the easiest way to do it.
Good Luck :innocent:

2 Likes