Search code examples
csspositioning

CSS - Google+ Box Positioning


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;
}

Solution

  • 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;
    }