CODEWITHSUNDEEP
jquerycsshtml
Jamie 'Synyster' Byrne
Jamie 'Synyster' Byrne

Reputation: 23

jQuery DIV overlapping background DIV

I've got a bit of a problem with my jQuery DIV. I've got a DIV called 'allcontent' which holds all the HTML and inside that I have a 'headlinesarea' DIV that contains all the headlines for the website and a 'datacontentarea' DIV that contains all the fixtures/tables and etc on the right hand side and it is also a DIV that is floated to the right and is written before the 'headlinesarea' DIV as it has to float.

The 'allcontent' DIV contains a transparent back ground image with repeat-y so that when more content is added the image will continue to repeat downwards and that works fine with the 'headlinesarea DIV', but when I add a jQuery DIV that has league tables that can open up and collapse the 'allcontent' DIV won't stretch and the jQuery DIV ends up overlapping the 'allcontent' DIV's background image.

The link to my site is http://thefootballleague.clanteam.com/ and here you can see my collapsible jQuery DIVS that are Championship League, League 1 and League 2. When they are clicked they open fine but unfortunately they do not stretch the 'allcontent' DIV background.

Any ideas guys?

Upvotes: 1

Views: 624

Answers (3)

SoWeLie
SoWeLie

Reputation: 1391

More appropriately, what you need is the clearfix:

http://www.webtoolkit.info/css-clearfix.html

Because your datacontentarea div is floating right, you will need to clear the float in order for the allcontent div to be sized properly.

Just apply the "clearfix" class to the "allcontent" div, after you've copied in the clearfix css of course.

This is the cleanest way to handle these types of floating issues.

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22251

Add the style: 

#allcontent {
    overflow: hidden;
}

Upvotes: 3

rjmcb
rjmcb

Reputation: 3745

Just add 

<div style="clear:both"></div>

at the bottom of "allcontent"

like this : 

<div id="allcontent">

<div id="header"></div>
<div id="nav">
...
</div>
<div id="datacontentarea">
...
</div>
<div id="headlinesarea">
...
</div>
<div style="clear:both"></div>//add this
</div>

or make it 

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

then add 

.clear{
    clear:both;
}

on your stylesheet

Upvotes: 1

Related Questions