Alignment issues with html divs stacked on top of each other

Question

I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.

<div id="Report" style="height: auto">
   <div id="Top" style="width:inherit; height:250px">
      <div id="First" class="TopMostLeft" >
         <span style="font-family:Calibri; font-size:small">Info</span>
         <table style="width:100%" > ... </table>
      <div id="Second" class="TopMostCenter">
         <span style="font-family:Calibri; font-size:small">Info2</span>
      <div id="Third" class="TopMostRight">
         <div id="About" class="TopRightDiv">
        <table style="width:100%">
   </div>
   <div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
   <div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">

</div>

Answer 1

Here's what you need. Create a stylesheet so we can style it much better.

Working Fiddle: https://jsfiddle.net/v9jgj7n3/

I created your layout. This is how I understand what you need.

HTML

<div id="Report">
   <div id="Top">
     <div id="First" class="TopMostLeft" ></div>
     <div id="Second" class="TopMostCenter"></div>
     <div id="Third" class="TopMostRight"></div>
   </div>
   <div id="Center"></div>
   <div id="Bottom"></div>
</div>

CSS

#Top {
    width: 100%;
    display: flex;
  height: 250px;
}

#Top #First {
    width: 10%;
    background: red;
}

#Top #Second {
    width: 40%;
    background: blue;
}

#Top #Third {
    width: 50%;
    background: yellow;
}

#Center {
  height: 200px;
  width: 100%;
  background: gray;
}

#Bottom {
  height: 80px;
  width: 100%;
  background: black;
}

Edit the width and height to your desired value. This is how it will work

Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.

Hope it helps. Cheers! Good Morning from Philippines.