Jump to content
vmars316

How to eliminate verticle space between Divs ?

Recommended Posts

Hello & Thanks,

How to eliminate verticle space between Divs ? 

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...