CODEWITHSUNDEEP
htmlcss
Echchama Nayak
Echchama Nayak

Reputation: 933

FIlling rectangle with boxes using CSS

I am trying to create a rectangle filled with boxes with colours

The following is my code:

<div class="col-md-3" >
  <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass0'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass1'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass2'/>           
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass3'/>
    <div style="height:10px;background-color:rgb(0,0,0);" id='pass4'/>
    <div style="height:10px;background-color:#FFA500;" id='pass5'/>
    <div style="height:10px;background-color:#FFA500;" id='pass6'/>
  </div>
</div>

I want something similar to this:

enter image description here

However, I am unable to acquire boxes. What am I doing wrong?

Upvotes: 0

Views: 188

Answers (3)

Scott
Scott

Reputation: 21882

Div tags are not self-closing. Using /> is not the correct way to close a div. Use </div> and things will work as expected.

#myViewport { 
      height: 700px; 
      width: 50px; 
      padding: 10px; 
      border: 5px solid #aaa; 
      margin: 0;}

/* the height calculation below divides the available space, minus the padding, then divided by the number of elements, resulting in boxes that fill the available space. */

#myViewport div { margin: 1px; height: calc((100% - 10px) / 7); }

#pass0, #pass1, #pass2, #pass3, #pass4 { background: #000;}

#pass5, #pass6 { background: #ffa500; }
<div class="col-md-3" >
  <div id="myViewport">
    <div id='pass0'></div>
    <div id='pass1'></div>
    <div id='pass2'></div>          
    <div id='pass3'></div>
    <div id='pass4'></div>
    <div id='pass5'></div>
    <div id='pass6'></div>
  </div>
</div>

Upvotes: 1

Ikhlak S.
Ikhlak S.

Reputation: 9034

You need to close your div tags properly using </div> and not just />.

To get the height of each box to fill the entire div, you can give each child div a height in percentage. In your case you would have 14.28%(No. of elements / 100). 

<div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;">
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass0'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass1'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass2'></div>           
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass3'></div>
  <div style="height:14.28%;background-color:rgb(0,0,0);" id='pass4'></div>
  <div style="height:14.28%;background-color:#FFA500;" id='pass5'></div>
  <div style="height:14.28%;background-color:#FFA500;" id='pass6'></div>
</div>

Upvotes: 1

YuvalJ
YuvalJ

Reputation: 139

Change color attribute to background-color The simple "color" property is reserved for font color

Upvotes: 1

Related Questions