title: Splitting a DIV into rows and columns
body: <p>Apologies if this has been asked before but I couldn't find exactly the same question.</p>
  
  <p>So I have a #container div which holds the main part of the web page content.</p>
  
  <p>I want to make a sub div so that I can create Rows in this container, each of a fixed height.</p>
  
  <p>Then inside each row Have either 1 (100% width) or 2 (48% width each (with gap between each)) or 3 (30% width each) sections inside.</p>
  
  <p>So I would imagine the page to be able to have the following layout (or any combination depending on the HTML)</p>
  
  <p><img src="https://i.stack.imgur.com/72QjP.jpg" alt="layout"></p>
  
  <p>Need to only be done in css/html</p>
  
  <p>and so that the overall black container has a background and also the red/green/brown containers also have background-colour: rgba(0,0,0,0.5)</p>
  
  <p>I tried just doing it with just divs</p>
  
  <p>eg one at 100% width, and then putting 2 %50width divs inside it but they didn't keep their full size even when I set a min width for each div. </p>
  
  <p>Could someone help with the css/html structure.</p>
  
  <p>Many Thanks.</p>