CODEWITHSUNDEEP
htmlcss
Liam M
Liam M

Reputation: 13

CSS: Divs Overlapping Unexpectedly

First post, and I'm not highly experienced in CSS. Website (http://www.passivhaustraining.co.uk/) has been working fine for a couple of years, but has suddenly developed a display issue (we were notified today).

When I view in Firefox, the header looks like this (expected behaviour): Header as viewed in Firefox

When I view in Chrome, it looks like this (erroneous behaviour): Header as viewed in Chrome

Until very recently, the header has displayed as expected in both Firefox and Chrome. I have checked the site on the Wayback Machine using Chrome, and historic site captures that were definitely working at the time in Chrome now display incorrectly. This makes me think that Chrome may have recently altered the way it interprets my CSS code.

The HTML for the header is as follows (incomplete, as I need to add some more CSS classes to the style section. However, the problematic ID is included.):

<div class="hgroup full-container ">
<a href="http://www.passivhaustraining.co.uk/" title="Passivhaus Training" rel="home" class="logo"><img src="http://www.passivhaustraining.co.uk/wp-content/uploads/2017/08/Passivhaus-Training.svg"  class="logo-height-constrain"  alt="Passivhaus Training Logo"  /></a>
<div id="header-sidebar" class="no-logo-overlay">
<aside id="custom_html-6" class="widget_text widget widget_custom_html">
<div class="textwidget custom-html-widget">
<div style="display: inline-block;"><img src="http://www.passivhaustraining.co.uk/wp-content/uploads/2017/05/aecbcarbonlite-e1495805835211.png">
</div>
<div style="display: inline-block;">Managed by WARM: Low Energy Building Practice<br>
on behalf of Passivhaus Trainers and the AECB<br>
<br>
For any queries, contact WARM on:<br>
01752 542 546<br>
training @ peterwarm.co.uk<br>
</div>
</div>
</aside>
</div>
</div>
<style>
<!-- .hgroup.full-container -->
#masthead .hgroup #header-sidebar aside.widget {
  margin-bottom: 0;
  float: left;
  position: relative;
  margin-right: 25px;
</style>

Shrinking the Chrome window, such that it mimics the size of a small laptop, tablet or mobile phone, forces the green logo and text to appear below the main site logo, which is as expected.

I'd be very grateful for any help.

Liam

Upvotes: 0

Views: 132

Answers (1)

Aonghas M
Aonghas M

Reputation: 2101

I had a look at your site on Chrome and it appears that both the elements that make up your header are floated to the left.

If you take this element:

<aside id="custom_html-6" class="widget_text widget widget_custom_html">

and remove the float: left from it the header corrects itself. It looks like it is being applied via your style.css however if you cant remove it for some reason they you could override it with the following:

#masthead .hgroup #header-sidebar aside.widget#custom_html-6 {
    float: none;
}

Upvotes: 1

Related Questions