Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1890 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

need someone else to look over this collapsing div problem

Thread title: need someone else to look over this collapsing div problem
Reply    
    Thread tools Search this thread Display Modes  
09-10-2011, 05:22 PM
#1
jasonm56 is offline jasonm56
jasonm56's Avatar
Status: I love this place
Join date: Jun 2007
Location: Minneapolis
Expertise: xhtml/css, jquery, php, mysql
Software:
 
Posts: 533
iTrader: 1 / 100%
 

jasonm56 is on a distinguished road

Send a message via MSN to jasonm56

  Old  need someone else to look over this collapsing div problem

I don't know what it is lately, but these last couple days I've been making too many stupid and simple mistakes. Today my problem is in my sites footer. It is a wordpress template I'm creating and is widgetized (not sure if this matters).

Here is the basic structure of the footer...

Code:
<div class="footer">
	<div class="footer-item">
		<h3>Recent Posts</h3>
		<ul>
			<?php wp_get_archives('type=postbypost&limit=4');?>
		</ul>
	</div>

	<div class="footer-item">
		<h3>Monthy Archives</h3>
		<ul>
			<?php wp_get_archives('limit=4'); ?>
		</ul>
	</div>
	<div class="footer-item">
		<h3>Daily Archives</h3>
		<ul>
			<?php wp_get_archives('type=daily&limit=4'); ?>
		</ul>
	</div>
</div><!-- end footer -->
</div><!-- end wrap -->
Ok now here is the CSS after I gave up figuring it out...
Code:
.footer {
	width: 960px;
	padding: 0 20px;
	margin: 20px auto 0 auto;
	background: #ff9933;
	min-height: 100px;
}
.footer-item {
       float: left;
       display: block;
       width: 300px;
       padding: 0px 5px 5px 5px;
       margin: 5px;
       background: #ff0000;
}
.footer-item ul {
       padding-left: 15px;
}
Now, the footer div isn't expanding to cover the .footer-item div's. The theme has them widgetized and that works perfectly fine testing it out. I tried clearing everything and am just not sure what I'm doing wrong. Would be great to have a 2nd pair of eyes look over this for me!

09-11-2011, 06:53 PM
#2
.Nick is offline .Nick
.Nick's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,159
iTrader: 3 / 100%
 

.Nick is on a distinguished road

  Old

It sounds like you want a clearfix.

http://www.positioniseverything.net/easyclearing.html

Reply With Quote
Thanked by:
jasonm56 (09-11-2011)
09-11-2011, 11:11 PM
#3
ronaldroe is offline ronaldroe
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
 
Posts: 9
iTrader: 0 / 0%
 

ronaldroe is on a distinguished road

  Old

Nick is likely right. It's probably that you didn't clear the floats.

Try this for a slightly more semantic approach (no empty div):

.footer:after{clear:left;height:0;width:0;overflow :hidden;}

Reply With Quote
09-11-2011, 11:52 PM
#4
jasonm56 is offline jasonm56
jasonm56's Avatar
Status: I love this place
Join date: Jun 2007
Location: Minneapolis
Expertise: xhtml/css, jquery, php, mysql
Software:
 
Posts: 533
iTrader: 1 / 100%
 

jasonm56 is on a distinguished road

Send a message via MSN to jasonm56

  Old

Originally Posted by .Nick View Post
It sounds like you want a clearfix.

http://www.positioniseverything.net/easyclearing.html
Thats exactly what I needed, thanks. I did try doing the old fashioned clear:both as a div style without any luck, and instead used :after with a display: brick. Works like a charm now.

Reply With Quote
Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed