I am facing an issue with my website layout. While it looks great on a 20" screen, on an 11" screen the elements are not displaying correctly. The #logo is overlapping the #menu, and the #bubble is appearing below the #frame. I had set percentage size parameters based on a tutorial I found, which worked for some elements but not all. What could be causing this problem?
I suspect that the height and width of the #bubble might be the issue since they are still in ems. When attempting to switch to percentages, I lost the circular shape and the #bubble often moved to the bottom of the page.
HTML:
<body>
<div id="top">
<div>
<p id="logo">XXXXXXXXXXX</p>
<div id="menu">
<h3 id="test">xxxxxx</h3>
<h3 id="test2">xxxxxx</h3>
<h3 id="test3">xxxxxx</h3>
<h3 id="test4">xxxxx</h3>
<h3 id="test5">xxxxxx</h3>
</div>
</div>
</div>
<div id="frame">
<div id="main"></div>
</div>
</body>
CSS
body {
width: 100%;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
background-image: url("http://www.wallpapersmood.com/uploads/2010-07/july-high-defintion-wallpaper/1280109101-FWEMRDA.jpg");
}
#top {
background-color: black;
width: 100%;
height: 50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
#logo {
text-align: center;
position: absolute;
margin-top: 0.5%;
margin-left: 2%;
color: white;
font-family: Impact,cursive;
font-size: 160%;
}
h3 {
width: 10%;
height: 10%;
border-radius: 9px;
text-align: center;
line-height: 2;
display: table-cell;
font-size: 120%;
font-family: "Verdana";
color: white;
}
h3:hover {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.35, rgb(60,156,196)),
color-stop(0.68, rgb(90,188,236)),
color-stop(0.84, rgb(117,226,255)));
opacity: 1;
}
#menu {
float: left;
width: auto;
height: auto;
margin-left: 20%;
margin-top: 0.5%;
}
#frame {
width: 78%;
height: 90%;
border: 1px solid;
border-radius: 20px;
margin-left: auto ;
margin-right: 5%;
margin-top: 1%;
background-color: white;
opacity: 0.9;
float: right;
}
#main {
height: 90%;
width: 80%;
border: 1px solid black;
border-radius:15px;
float: right;
margin-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
background-color: white;
overflow: auto;
}
#main img {
max-width: 60%;
max-height: auto;
margin: auto;
margin-top: 2%;
display: block;
border-radius: 15px;
}
#bubble {
position: absolute;
height: 14em;
width: 14em;
border: 6px dashed white;
text-align: center;
border-radius: 100%;
margin-left: 1%;
margin-top: 1%;
opacity: 0.6
}
#bubble p {
position: relative;
top: 20%;
font-size: 200%;
color: white;
font-family: "Impact";
}