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
Post a Comment