1 reply [Last post]
SnowMann's picture
Last seen: 8 years 30 weeks ago
Timezone: GMT+1
Joined: 2014-02-27
Posts: 1
Points: 2


I am hoping somebody has the time to check out my site: http://www.doggy-daycare.dk.

I am using Wordpress as CMS. In the top right corner I have added the following widgets: Socialmedia icons, some text and two buttons. My problem is that they are aligning differently when viewing the site in Firefox than in Chrome. Any suggestions why this is?

Secondly - how can i make them align on top of each other, so that the text is positioned over the buttons and socialmedia icons?

The CSS:

element {
    padding-top: 62.5px;
    padding-bottom: 62.5px;
header#masthead hgroup #header-sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;


<div id="header-sidebar" style="padding-top: 62.5px; padding-bottom: 62.5px;">
    <aside id="text-2" class="widget widget_text"></aside>
    <style media="all" type="text/css"></style>
    <aside id="origin_button-2" class="widget widget_origin_button"></aside>
    <aside id="origin_button-3" class="widget widget_origin_button"></aside>
    <aside id="vantage-social-media-3" class="widget widget_vantage-social-media"></aside>

Thank you!


Tony's picture
Last seen: 1 week 27 min ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi SnowMann It looks like

Hi SnowMann

It looks like Firefox is getting it right here.
Chrome seems to be ignoring the float:right; on the "aside". No idea why, then floating the stuff inside left.

You might be beter off positioning the elements absolutely inside the header-sidebar to get a consistent result.