Search code examples
htmlcssmenuscaleshift

Stop Menu from Shifting

I built a menu but for some reason the left side of the menu drops when the browser is re-sized and when this happens the bottom border disappears. Is there any way to stop this from happening and just have the whole menu scale until it reaches a certain size?

heres my CSS:

    @charset "utf-8";
/* Main CSS Document */

#parent{
  padding: 0px, auto;
  width: 50%;
  min-width:50%;
  height: 50px;
  margin-top:3%;
  margin-left: 25%;
  margin-right: 15%;
  background: #FFF;
  border-bottom:thin groove #000;
}
#child-left{
  float: left;
  padding-left:25px;
  width: 35%;
  min-width:35%;
  height: 50px;
  background: #FFF;
}
#child-right{
  padding-top: 15px;
  padding-right:20px;
  float: right;
  width: 60%;
  min-width:60%;
  height: 35px;
  background: #FFF;
}
#logoparent{
  padding: 0px, auto;
  width: 100%;
  height: 50px;
  margin-left: 15%;
  margin-right: 15%;
  background: #FFF;
}
#menu{
  float:right;
  padding-right:7%; 
  font-family:"Courier New", Courier, monospace;
  font-size:18px;
  font-weight:600;
  color:#666666;
}
#menuend {
  padding-right:10px;
  float:right;
  font-family:"Courier New", Courier, monospace;
  font-size:18px;
  font-weight:600;
  color:#666666;
}
#menu:hover{
    color:#C30;
}

And here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
            <title>Home</title>
</head>
<body>
    <div id="parent">
    <div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
    <div id="child-right">
        <div id="menupad">
            <div id="menuend"> Contact </div>
            <div id="menu"> Gallery </div>
            <div id="menu"> About </div>
            <div id="menu"> Home </div>
        </div>
    </div>
</div>
</body>
</html>

Any help is greatly appreciated!

Solution

  • Ok so I saw your design and couldn't decipher all the % you are using in your css (my bad) so i started from scratch and tried to match your design. I hope you can adjust it to your linking. Here it is:

    See jsFiddle

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
            <title>Home</title>
</head>
<body>
    <div id="parent">

        <div id="child-left">
            <img name="Logo" src="" width="200px" height="50px" alt="" />
        </div>

        <div id="child-right">
            <div id="menupad">
                <div id="menuend"> Contact </div>
                <div id="menu"> Gallery </div>
                <div id="menu"> About </div>
                <div id="menu"> Home </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

    CSS

        @charset "utf-8";
/* Main CSS Document */

#parent{
    max-width: 900px;
    margin: 0 auto;
    border-bottom:thin groove #000;
}
#child-left{
    float: left;
    height: 50px;
}
#child-right{
    float: right;
    height: 50px;
    line-height: 80px;
    vertical-align: bottom;

}
#logoparent{
  height: 50px;
}
#menu{
  float:right;
  font-family:"Courier New", Courier, monospace;
  margin-left: 10px;
}
#menuend {
  float:right;
  font-family:"Courier New", Courier, monospace;
  margin-left: 10px;
}

.clear{
    clear: both;
}