html - Getting undesired space between 2 divs -


i don't understand why i'm getting undesired space, want clubs , events divs in same height under header div.

practically, big space between header , clubs & events divs.

the html:

<!doctype html> <html> <head> <title>metzo</title>     <link rel="stylesheet" type="text/css" href="index.css"> </head>  <body>     <div class="metzo">          <div class="header">         </div> <!-- getting huge space here in y-axis -->         <div class="clubs">         hello         </div>         <div id="space1"> </div>         <div class="events">         hello             <?php                  //include("event.php");                 //include("event.php");                 //include("event.php");             ?>         </div>     </div> </body>  </html> 

the css:

html {background-color:black;} html, body { height: 100%; width: 100%; margin-top: 1%; color:white;}  .metzo      {     width:80%;     height: 80%;     padding:0px;     margin-left:10%;     margin-right:10%;     /*margin-bottom:5%;*/     text-align:center;     }  .header     {     width:100%;     height:10%;     border:solid thick white;     }  .clubs     {     display:inline-block;     width:45%;     height:100%;     border:solid thick white;     margin-top:0px;     }  #space1 {     display:inline-block;      width:3%;     height:100%;     float:top;     /*border:solid thick white;*/     }  .events     {     display:inline-block;     width:45%;     height:100%;     border:solid thick white;     text-align:center;     } 

fiddle: http://jsfiddle.net/uc7ge/

what on earth #space1 for? solution uses box-sizing on elements enable specification of fluid width fixed border width:

.clubs, .events {     box-sizing: border-box;     width: 46.5%;     margin: 0 } .events {     margin-left: 3%; // instead of #space1 } 

edit: realize #space1 meant space between .clubs , .events, it's bad practice use empty element spacer. solution gets along fine without it!


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -