Floating Problem

[in4308]

Hi All, hope you can help.

To put it as shortly as possible. I am trying to float 2 items so that they will line up eventually. Then the background-wrap is supposed to go around it.

Now, IE shows it correctly (weirdly!) but, firefox does not. Like so……..http://qkpic.com/127f4

It shows them side-by-side but firefox wont let the background-wrap around it.

Heres the code i’m using for it (without all the other crap)….

Code:

.album
{
margin: 7px 0;
padding: 7px;
background-color: #fafafa;
border: 1px #ccc solid;
float: left;
width: 440px;
margin-right: 10px;
height: 90px;
overflow: hidden;
margin-bottom: 7px;}

The wrap itself is part of the wordpress main styling. The floats are also cleared just underneath the code itself.

I’m not sure why its doing it and have tried lots of different changes. Now, im sure it’ll be something simple that i’m just missing so hopefully somebody can just point it out!

Thanks in advance.

[chris]

Can you show us the page source? When I went to view page source for some reason I could not find it. I’m thinking it has something to do with the div order.

[in4308]

Ok, Heres the page source. I’ve had to put an XXXXX in places where I can’t put certain names as this is a client project due to go live soon…..

Code:

Now Playing….

[apostrophe]

Start by validating. 95 errors on the page.

[in4308]

"apostrophe" wrote:

Start by validating. 95 errors on the page.

There are likely to be errors as i’ve had to take parts of the links out and change stuff around to not give anything away.

I’m pretty sure this isn’t a validation error, its something i’m doing wrong in the code/css…..Its a standard problem i’ve had before but this time want to get it fixed.

Basically, when I float to the left in firefox, firefox does not see the wrap the floats within it and because the wrap does not have a set height as the height will change, it causes a problem.

[TheDoc]

It looks like you simply need a clear at the end of the floated items, but before the wrap div gets closed.

.clear {
clear:both;
}

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

[tbwcf]

I’d agree with the doc without trawling through your code. either like the Doc said or you can just make the clear a break rather than using a div so <br style="clear:both" /> or add .clear {clear:both;} to your CSS and then <br class="clear" /> all the same thing really I just preffer to use a br tag rather than an empty div.

Let us know if that helps

[in4308]

Thanks for all your help on this guys.

I originally had cleared the float within the plugin itself but after adding another float clear within the actual page.php file, it worked a treat and has finally sorted itself out.

Once again, thanks!

[Author]

Posts