Why minimizing the window causing the HTML elements to disappear from the parent container itself?

Question

I have the following HTML code with me. I have duly tried to centrally align the parent container div #header and the childs within it #header1 and #header2 respectively. But when I try to minimize the window the parent container seems not to be centrally aligned and moreover the child headers seems to be collapsed even after setting the width explicitly to width:50%; of the parent container. Why is it so? Please explain and help me fix this. Also note the horizontal navigation bar below it also seems to be associated with the same bug I mentioned above.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        margin:10px auto;
        background-color : red;
        width:70%;
        height:80px;    
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    #header1 {  
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;           
    }
    #header2 {
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    #navmenu {
        list-style-type:none;
        background-color:#444;
        border:black 2px solid;         
        text-align:center;
        margin-bottom:20px;
    }
    #content {
    }
    #nav {
    }
    #navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        line-height:30px;
        width:33%;
        display:inline-block
    }
    #navmenu li a {
        text-decoration:none;           
        display:block;
    }
</style>
</head>
<body>
<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>                  
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>
</body>
</html>

You should create a jsFiddle or a snippet so we can see the problem faster and help you — Tomas Ramirez Sarduy, Apr 26 '15 at 06:42

score 1 · Accepted Answer · answered Apr 26 '15 at 06:47

The fixed height on #header prevented the text to be visible on smaller screens as there isn't enough space. I removed it so the height is dynamic.

Also added some margin left and right of #header1 and #header2 so they don't stick to eachother.

The horizontal menu items collapsing can be fixed with box-sizing, and width: 33.33%

Jsfiddle

More info on box-sizing can be found here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Hope this helped.

score 0 · Answer 2 · edited May 23 '17 at 12:06

The problem is that you have display: inline-block in both elements #header1 and #header2, so that's actually expected behavior in HTML. I changed display:inline-block for float: left; in both elements, but you still will need to make more changes to get the desired look. If yoy want the website responsive, you should check some tutorials about Responsive Design and Media Queries

*{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        margin:10px auto;
        background-color : red;
        width:70%;
        height:80px;    
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    #header1 {  
        float: left;
        width:50%;
        text-align:center;
        line-height:80px;           
    }
    #header2 {
        float: left;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    #navmenu {
        list-style-type:none;
        background-color:#444;
        border:black 2px solid;         
        text-align:center;
        margin-bottom:20px;
    }
    #content {
    }
    #nav {
    }
    #navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        line-height:30px;
        width:33%;
        display:inline-block
    }
    #navmenu li a {
        text-decoration:none;           
        display:block;
    }

<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>                  
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>

Why minimizing the window causing the HTML elements to disappear from the parent container itself?

2 Answers2