Clever Geek Handbook

Div inside wrapping div will not display

I am creating a responsive web page. I've never had this problem before, but I can't seem to find a solution. I have created a div wrapper around 3 other divs, but the 3 containing div will not display for some reason, can someone tell me why:

Html

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="css/responsive.css" type="text/css" />

</head>

<body>

    <div class = "header">

        <div class = "logo">

        </div>

        <div class = "nav">

        </div>

        <div class = "search">

        </div>

    </div>

</body>


</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

.header{

    height:20%;
    width:100%;

}

.logo{

    height:100%;
    width:100%;
    display:inline;
    background:blue;

}

.nav{

    height:100%;
    width:50%;
    display:inline;
    background:green;

}

.search{

    height:100%;
    width:30%;
    display:inline;
    background:orange;

}
+3


source to share


2 answers


One solution is to change the display for blocking and use float

:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display:block;/*Change to block*/
    background:blue;
    float: left;
}
.nav {
    height:100%;
    width:50%;
    display:block;/*Change to block*/
    background:green;
    float: left;
}
.search {
    height:100%;
    width:30%;
    display:block;/*Change to block*/
    background:orange;
    float: left;
}
      

        
        
        
      

    
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>
Run codeHide result


And another easy to use one display: inline-block

:



html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display: inline-block;/*Change to inline-block*/
    background:blue;
}
.nav {
    height:100%;
    width:50%;
    display: inline-block;/*Change to inline-block*/
    background:green;
}
.search {
    height:100%;
    width:30%;
    display: inline-block;/*Change to inline-block*/
    background:orange;
}
      

        
        
        
      

    
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>
Run codeHide result


Both will work.

+2


source


You have a problem with element heights. You cannot have a percentage as a height unless you have a fixed reference number.

Example:



body { height: 500px; }
0


source






More articles:


All Articles