CODEWITHSUNDEEP
htmlcss
Bush
Bush

Reputation: 2533

Getting undesired space between 2 divs

I don't understand why I'm getting the undesired space, I want the clubs and events divs to be in the same height but under the header div.

practically, I get a big space between the header and the 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 a huge space here in the 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;
    }

Upvotes: 0

Views: 82

Answers (5)

George Dodge
George Dodge

Reputation: 31

Change in the CSS metzo Height:Auto;

.metzo {
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
    text-align: center
    width: 80%;
}

Upvotes: 2

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

Fiddle: http://jsfiddle.net/UC7GE/

What on earth is #space1 for? My solution uses box-sizing on the elements to enable specification of fluid width as well as fixed border width:

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

EDIT: I realize #space1 is meant to be a space between .clubs and .events, but it's bad practice to use an empty element simply as a spacer. This solution gets along fine without it!

Upvotes: 3

cske
cske

Reputation: 2243

.metzo height couses the gap

.metzo 
    {
    width:80%;
    /*height: 80%;*/
    padding:0px;
    margin-left:10%;
    margin-right:10%;
    /*margin-bottom:5%;*/
    text-align:center;
    }

http://jsfiddle.net/LNwYq/

Upvotes: 1

geekchic
geekchic

Reputation: 2431

#space1 {
display:inline-block; 
width:3%;
height:10%; /*Change the height*/
float:top;
}

You are defining the height with respect to the parent element which in this case is metzo

Upvotes: 2

Divya Bhaloidiya
Divya Bhaloidiya

Reputation: 5064

Use height auto for .metzo class 

.metzo {
        width:80%;
        height: auto;
        padding:0px;
        margin-left:10%;
        margin-right:10%;
        /*margin-bottom:5%;*/
        text-align:center;
        }

Upvotes: 2

Related Questions