I added the G+ box to the homepage and notice that when I increase or reduce the browser page size the website content stays on the same place - but the G+ box moves and covers the content. How can I fix the Badge relative to the content and not the browser?
Website Here
The CSS:
html {
height:100%;
}
body {
background:#000;
margin: 0;
padding: 0;
height:100%!important;
min-height:750px;
min-width:980px;
}
object, embed {
vertical-align:top; min-height:750px; outline:none; margin: 0; padding: 0;
}
div {
height: 100%;
}
img {
border:none; vertical-align:top
}
.aligncenter {
text-align:center;
}
.google {
right: 150px;
top: 600px;
position: fixed;
height: 60px;
border: 0;
}
If you want to keep the G+ box always in the same place, why not creating a relative positioned container for the flash and logo and an absolute positioned one inside for the G+? Your G+ box doesn´t need to have dynamic width (the flash is just centered but doesn´t change width) so you have no constrains there. Or am I missing something?
.container {
position:relative;
}
.google {
position:absolute;
left: 600px;
top: 600px;
height: 60px;
border: 0;
}