7 Replies - 2126 Views - Last Post: 23 August 2009 - 11:13 AM

#1 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

DIV Overlapping

Posted 20 August 2009 - 05:01 AM

Hey Guys,

I'm having a problem with a DIV which houses my gallery that is inside the main content DIV, the problem is the gallery DIV seems to be overlapping the Footer div rather than pushing it down.

I'm not on my home computer at the moment so cant post the CSS but here is the culprit page http://www.wrigglesb...uk/gallery.html

Cheers,

tommyflint

Is This A Good Question/Topic? 0
  • +

Replies To: DIV Overlapping

#2 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: DIV Overlapping

Posted 20 August 2009 - 06:38 AM

Hey i'm back at my home PC now so here is the related code:

HTML
<!--Page Main Starts-->
<div id="Main">
	<div id="fleft">
		<div id="gallery">
			<ul>
				<li>
					<a href="photos/Cabin_Outside.jpg" title="Outide the cabin. $('#gallery').lightBox();">
					<img src="photos/Cabin_Outside_T.jpg" alt="" />
					</a>
				</li>
				
				<li>
					<a href="photos/Stove.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/Stove_T.jpg" alt="" />
					</a>
				</li>
				
				<li>
					<a href="photos/Sun_Swing.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/Sun_Swing_T.jpg" alt="" />
					</a>
				</li>
				
				<li>
					<a href="photos/Wagon_&_Swing.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
						<img src="photos/Wagon_&_Swing_T.jpg" alt="" />
					</a>
				</li>
				
			</ul>
		</div>
	</div>
	<div id="fright">
	</div>
<!--Page Main Closes-->
</div>

<!--Page Footer Starts-->
<div id="Footer">
	<p class="Footer_text"><a href="contact.asp">Contact Us</a> | <a href="cancel.html">Cancelation</a>
								| <a href="admin_login.asp">Admin</a><br />
								Copyright &copy; 2009 ---. All Rights Reserved.</p>
<!--Page Footer Closes-->
</div>



CSS
#Main
{
	background-image:url(Images/page_back.png);
	background-repeat:repeat-y;
	max-width:851px;
	height:400px;
	padding:20px;
}

#fleft
{

	float:left;
	min-width:580px;
	max-width:580px;
	height:340px;
	padding-right:20px;
}

#fright
{
	float:right;
	min-width:165px;
	max-width:165px;
	height:340px;
	padding-top:70px;
	padding-left:20px;
	padding-right:20px;
	background-image:url(Images/info.png);
	background-repeat:no-repeat;

}

#Footer
{
	padding-top:20px;
	color:#000;
	background-image:url(Images/Footer.png);
	background-repeat:no-repeat;
	min-height:90px;
	width:851px;
}




cheers,

tommyflint
Was This Post Helpful? 0
  • +
  • -

#3 kewlkreator   User is offline

  • D.I.C Lover
  • member icon

Reputation: 39
  • View blog
  • Posts: 1,068
  • Joined: 25-March 09

Re: DIV Overlapping

Posted 20 August 2009 - 06:46 AM

Why not just set the footer x and y? Then you dont have to have a div pushing it down.
Was This Post Helpful? 0
  • +
  • -

#4 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: DIV Overlapping

Posted 20 August 2009 - 07:21 AM

I dont understand what you mean kewlkreator?
Was This Post Helpful? 0
  • +
  • -

#5 Mike007   User is offline

  • D.I.C Regular
  • member icon

Reputation: 7
  • View blog
  • Posts: 332
  • Joined: 30-August 07

Re: DIV Overlapping

Posted 20 August 2009 - 08:32 AM

Ok I think I found your problem. #Main's height property is too small, if you do the math on the pictures (i.e. add the height + padding + margin) you will find that it exceeds the height available. The result of this is an overflow which is by default set to visible in CSS. All you need to do to fix it is set the height to something a little higher, tried 475px in Firebug, seems to work.

Btw, what kewlkreator means is that you use absolute positioning or relative positioning to set the location of the footer on the screen. You can use bottom property and set it to 0 to make it stick to the bottom. But I never tried using the bottom property so I am not sure how well it works (IE support?).

Hope that helps,
Mike

This post has been edited by Mike007: 20 August 2009 - 08:39 AM

Was This Post Helpful? 0
  • +
  • -

#6 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: DIV Overlapping

Posted 20 August 2009 - 08:50 AM

Cheers Mike 007.
I understand what you mean but shouldn't it just expand the Main DIV as the Gallery DIV is housed inside the Main DIV,
It works like this when i just put <p>Lots of text thats exceeds the 400px height of the main div</p> in side the Main DIV and the Footer gets pushed down like it should :S

Cheers

Tommyflint

This post has been edited by tommyflint: 20 August 2009 - 08:52 AM

Was This Post Helpful? 0
  • +
  • -

#7 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: DIV Overlapping

Posted 20 August 2009 - 12:22 PM

Please can anyone advice this is really starting to bug me.... grrr

cheers,

tommyflint
Was This Post Helpful? 0
  • +
  • -

#8 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: DIV Overlapping

Posted 23 August 2009 - 11:13 AM

anyone????
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1