Disapearing background graphic? uhmm

[elliot]

Hi there,

I've come across a weird one whilst making my latest web project. For a two col layout i've floated both cols left though in doing so the background disapears working only without floated divs above it?

I'm about to try and find some info on floats that might help. If your able to offer anything I'd really aprieciate it

The missing background is situated in the content containing div called (.full_back)

Here's the problem page... http://www.bhbgroup.co.uk/our_product.html

As always IE seems to be fine... typical!

many thanks,
elliot

[jscheuer1]

When floating an element within, say - a division, IE will cause that element to expand to accommodate the floated content. In most other browsers, floating something is akin to setting its position property to absolute, taking it out of the flow of the document, therefore preventing its container(s) from being expanded by it. Often a min and/or max, or just a plain height can be set for the container to compensate in other browsers. Most likely this is what is at work here. I'll have a closer look to try and see for sure but, the above is a very important consideration when using floats.

[jscheuer1]

Yes, setting .full_back to:

.full_back {
background: url("../img/bgrounds/content_back2.gif") no-repeat center bottom;
margin:0;
padding:0 ;
height:900px;
}

Takes care of it but, could cause other problems when the page is 'put through its paces', or on other pages using the same stylesheet.

[elliot]

Hi John, many thanks for your pointers..

I've uploaded the page and have recently juggled the style sheets about a bit to try and be a little more organized

http://www.bhbgroup.co.uk/our_product2.html

The problem I'm getting now I think is to do with clearing of the left col float as the background graphic breaks in FF.

Hopefully I'm nearly there and this is an easy fix !?

all the best,
Elliot

[jscheuer1]

We cross posted, I think. If so, see my new post immediately before your post above. In addition to my comments there, I can't see why .full_back needs a width set.

[elliot]

Yep crossed post!

I've removed the width, thanks for spotting that one.. I've included the height to (.full_back) which works fine though if the page has less content it would leave a huge empty space at the bottom..

Maybe this area should be managed with an inline style that I could change depending on the content..

I wont bother you anymore on this one John, thanks once again for your help.

[mwinter]

I'm not sure if you edited the code you've linked (and I couldn't check earlier as your server was down, apparently), as I don't see any significant differences between IE and Fx, but I don't see you using what John suggested, either. Then again, you only seem to be floating one column, so perhaps that's the change you made?

Based on John's description, he's got the cause right, but I don't agree with the solution precisely because it can cause a lot of empty space to appear (as you suggest, yourself). Though setting an explicit height will stretch an element that contains floated elements, a better solution is to include an element that has the clear property applied to it.

#container .stretch {
  clear: direction;
}

<div id="container">
  <!-- floated element -->
  <!-- another floated element -->
  <div class="stretch"></div>
</div>

where direction replaced as appropriate. Using the value, both, is convenient, but may interfere in some cases. I'd only use it if one of the elements is floated left, and the other to the right.


Incidentally, you might want to consider applying the clear property to the orange text near the bottom. If the left-hand column was longer, it would overlap, which might not be desirable.

You can see the overlap now, using the Web Developer extension for Firefox. Using the Outline Custom Elements feature, you'll observe that the left-hand column just breaches the border of the later div element (that's just really aggressive compression, by the way ).

Mike

[elliot]

Hi Mike, thanks very much for adding to this post..

appologies in advance as I'm actually finding this a little confusing

Basically I ended up floating just the left col and the right col has a margin: 0 0 0 430px; While this works fine visually, if the left col has more content the background breaks leaving a black gap between the footer. The only way round I could see was to add padding to the bottom of the right col to go past the content on the left, whewwww...

This is obviouly not the best method if each page has different heights of content.

I've added .stretch class to the main containing div #content_wrap and have placed an empty div below the column div's, unfortuantely this hasn't done anything though I'm guessing I've gone and placed it in the wrong place

Going to have another look now

Here's the page i've been working on http://www.bhbgroup.co.uk/our_product.html


I appreiciate your time,
Elliot

[jscheuer1]

I understand what Mike is saying and am grateful to have the information. Working from when you first posted and had just the single style sheet, I did this in the style sheet:

.full_back {
background: url("../img/bgrounds/content_back2.gif") no-repeat center bottom;
margin:0;
padding:0 ;
width:825px;
}

.stretch {
clear:both;
}

And this in the markup (addition red):

<div class="right380">
<h2>Products &amp; Services</h2>

<h3>Sub Titla</h3> 
<ul>
<li>Manufactured to ASTM dimensions</li>
<li>Diameters from ¾" to 2" Schedule 80</li>
<li>UL and LPCB approved</li>
<li>Certified training available on and off site for installers</li>
<li>For product list and installation guide please go to the brochure section, for current products available please register in our client login section</li>
</ul>
<h3>Services</h3> 
<ul>

<li>BHB provide a consultancy support service for its clients, which includes</li>
<li>Free of charge advice is available on all projects</li>
<li>Design of residential and domestic fire sprinkler installations encompassing BS9251:2005 or relevant standard</li>
<li>Supply full hydraulic calculations to justify system and certificates of compliance upon commissioning of system</li>
<li>All drawings are supplied on AutoCAD and can be received and sent electronically</li>
<li>Fire sprinkler sub-contract opportunities</li>
</ul>
<img src="img/bgrounds/case_image1.jpg" width="313" height="215" />
</div>  
<div class="stretch"></div>
<!-- -->

</div>

Worked well in Opera, FF and IE.

[jscheuer1]

I am attaching my entire page, in case you need it after all your changes. I put the style on the page. I also set a base href:

<base href="http://www.bhbgroup.co.uk/" />

To work with it locally, this can be removed once the page is in its correct position in your directory setup. Click the below link to download it in archived form:

Attachment 337