some divs are not full width until i resize window problem

Hi Guys

We have had a couple of display issues creep into a canvas project. They weren't there to begin with so something has changed over time. They are different issues but probably related. Tested on chrome, but the same on other browsers.

The first issue is here.
https://www.castlegolf.com/issue1.asp
You can see the latest news div is not expanding to full width when you first load the page. If however you change the browser window size then the layout sorts itself out correctly.

second issue is here.
https://www.castlegolf.com/issue2.asp
Very similar in that the div is not automatically expanding to full width until you resize the window.

Any ideas would be greatly appreciated. attached images show problem.

Many thanks

Mike

Hello

Thanks for pointing that out, I have cleaned up the validation errors but they did not resolve the issue.

However I have isolated the css causing the problem, but I can't solve it.

In style.css there is this
#header.transparent-header + #slider,
#header.transparent-header + #page-title.page-title-parallax,
#header.transparent-header + #google-map,
#slider + #header.transparent-header {
top: -100px;
margin-bottom: -100px;
}

And specifically it is the margin-bottom: -100px; causing the issue. If I take this line out (or actually keep the value 0px or higher) then I do not get any display errors. It works perfectly. However I need the margin-bottom: -100px so the slider is in the right place at the top of my page for styling purposes.

Any ideas what I could try? It seems the margin-bottom seems to throw a few wobbles on elements of the page - like the carousel.

Mike

Hey many thanks, this worked if you put that after the section.

solution:

<section id="slider" class="slider-element slider-parallax revslider-wrap clearfix">
<div class="slider-parallax-inner">...</div>
</section>

<div class="clear"></div>

Thanks for your help in resolving this.

Mike