vmars316 Posted February 5, 2019 Share Posted February 5, 2019 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> Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2019 Share Posted February 6, 2019 Delete the empty paragraph tags <p></p> Link to comment Share on other sites More sharing options...
vmars316 Posted February 6, 2019 Author Share Posted 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> Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2019 Share Posted 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 Link to comment Share on other sites More sharing options...
vmars316 Posted February 6, 2019 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Ingolme Posted February 6, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
merazgasalim Posted February 24, 2019 Share Posted February 24, 2019 Add this to your style p { margin: 0; } and the space will disappear Link to comment Share on other sites More sharing options...
shaili_shah Posted November 29, 2019 Share Posted November 29, 2019 one way is add style to p tag p{ margin : 0!important } another way is remove empty p tag Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now