How to eliminate verticle space between Divs ?

vmars316 · February 5, 2019

Hello & Thanks,

I have tried gazillions of solutions but none of them work .

Thanks for your help !

<!DOCTYPE  html>  
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>3-Rows-3-Cols.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
         line-height: 1.5em;
         margin: 0 auto;
         padding:0;
         border: 0;
         vertical-align: top;
         }
         html {
         margin: 0 auto;
         padding:0;
         border: 0;

         }
         .Table
         {
         text-align: center;    
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         display: block;
         }
       		#container {
	         		padding-bottom: 1001em;
		         	margin-bottom: -1000em;
            overflow: hidden;
            vertical-align: top;
            margin: 0 auto;
            padding:0;
	        }
         #Row2
         {
         display: inline-block;    
	       	width: 100%;
       		margin: 0 auto;
         padding:0;
         display: block;
         vertical-align: top;
	         }
         #Row3
         {
         display: inline-block;    
         width: 100%;    
         margin: 0 auto;
         padding:0;
         display: block;
         vertical-align: top;
         }
         
         #Row1Cell1
         {
         display: inline-block;   
         text-align: center;
         width: 100%;
         }
         #Row2Cell1
         {
          display: inline-block;   
  		      background-color: #DAE9BC;
		        width: 15%;
		        margin: 0 auto;        
      				float: left;
  }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
       		width: 70%;
       		background-color:#F8F8FF;
	       	margin: 0 auto;         
         float:left; 
         }
         
         #Row2Cell3
         {
         display: inline-block;   
		       width: 15%;
		       background: #e9f2d7; 
		       margin: 0 auto;         
     				float: right;
         }
         #Row3Cell1
         {
		       width: 100%;
		       height:70px;
		       background: #BCCE98;
		       margin: 0 auto;         
         }
      </style>
   </head>
   <body>
      <br>
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
               <p id="mainHeading"> myMainHeading</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
         <p></p>
         <div id="container">
         <div id="Row2">
            <div id="Row2Cell1">
               <p> Row 2 Column 1</p>
            </div>
            <!-- <div class="Cell"  -->
            <div id="Row2Cell2">
               <p> Row 2 Column 2</p>
            </div>  <!-- <div class="Cell"  -->
            <div id="Row2Cell3">
               <p> Row 2 Column 3</p>
            </div>  <!-- <div class="Cell"  -->
         </div>  <!-- <div class="Row"  -->
          </div>   <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <p></p>
         <div id="Row3">
            <div id="Row3Cell1">
               <p>Row 3 Column 1</p>
            </div>
            <!-- <div class="Cell"  -->
         </div>
         <!-- <div class="Row"  -->
      </div>
      <!--  <div class="Table">  -->
   </body>
</html>

Ingolme · February 6, 2019

Delete the empty paragraph tags <p></p>

vmars316 · February 6, 2019

Ah... That worked great for between Row1 and Row2 .

But between Row2 and Row3 there is still a space .

I tried variations of vertical-align: top; and vertical-align: bottom;

and

margin-bottom: 1001em; and margin-bottom: -1000em;

but no go yet .

Thanks

<!DOCTYPE  html>  
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>3-Rows-3-Cols.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
         /*         line-height: 1.5em;  */
         margin: 0 auto;
         padding:0;
         border: 0;
         vertical-align: top;
         }
         html {
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         .Table
         {
         text-align: center;    
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         vertical-align: top;
         }
         #Row3
         {
         display: block;    
         width: 100%;    
         margin: 0 auto;
         padding:0;
         vertical-align: top;  
         }
         #Row1Cell1
         {
         display: inline-block;   
         text-align: center;
         width: 100%;
         }
         #Row2Cell1
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 15%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
         width: 70%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         display: inline-block;   
         width: 15%;
         background: #e9f2d7; 
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;         
         }
      </style>
   </head>
   <body>
      <br>
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
               <p id="mainHeading"> myMainHeading</p>
            </div>  <!-- <div class="Cell"  -->
         </div>  <!-- <div class="Row"  -->
         <div id="container">
         <!-- ============NewRow============== -->
            <div id="Row2">
               <div id="Row2Cell1">
                  <p> Row 2 Column 1</p>
               </div>  <!-- <div class="Cell"  -->
               
               <div id="Row2Cell2">
                  <p> Row 2 Column 2
                  </p>
               </div>
               <!-- <div class="Cell"  -->
               
               <div id="Row2Cell3">
                  <p> Row 2 Column 3
                  </p>
               </div> <!-- <div class="Cell"  -->
            </div> <!-- <div class="Row"  -->
         </div>  <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
               <p>Row 3 Column 1</p>
            </div>  <!-- <div class="Cell"  -->
         </div>  <!-- <div class="Row"  -->
      </div>  <!--  <div class="Table">  -->
   </body>
</html>

Ingolme · February 6, 2019

It's just a case of collapsing margins, you would be able to see this if you used the browser's development tools to inspect the element and its children.

This would be easier if you were using classes instead of IDs so that you could reuse them. A quick solution to your problem is to add overflow: auto to #Row3

vmars316 · February 6, 2019

Thanks ,

That did it .

I did use DevTools but didn't interpret it as anything wrong .

I am checking out overflow here:

https://www.w3schools.com/cssref/pr_pos_overflow.asp

As always. Thanks

Ingolme · February 6, 2019

The solution I provided is not directly related to the overflow property, but setting overflow does solve it. It's just a side-effect of the overflow property on elements with variable height. If you want to learn more about the real problem, you should research "collapsing margins" rather than the overflow property.

merazgasalim · February 24, 2019

Add this to your style

 p {
			  margin: 0;			  
   }

and the space will disappear

shaili_shah · November 29, 2019

one way is add style to p tag

p{

margin : 0!important

}

another way is remove empty p tag

Sign In

How to eliminate verticle space between Divs ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

merazgasalim

Link to comment

Share on other sites

shaili_shah

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity