Background loses height with floated elements

I know why my background is losing its height, but have tried several solutions none of which have worked.   I'm sure I'm missing something simple but running out of patience.

www.onecornerstone.org is the site,

The bottom footer elements are expanding over the background and I can't seem to get it fixed.

I've tried a clear:both in a <br /> tag, overflow: hidden and several other options but I'm sure something is missing.
LVL 2
axessJoshAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
The only thing I can see that would cause a problem if you removed your min-height settings is the height you've set on the middle DIV. You set it to a height of 100px. Remove that and things will flow as they should:

//style.css - line 1603
#foot-content #foot-mid {
   float: left;
   height: 100px; <!-- remove this line -->
   margin: 10px 0;
   padding: 0 10px;
   width: 175px;
}

Open in new window

0
 
AshokCommented:
So you want the height to be bigger than what it is now?
0
 
axessJoshAuthor Commented:
yes, I'd like the height of the blue background to expand with the height of the 3 floated columns.
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
AshokCommented:
Can you copy the image of the page and edit to make it look like how it supposed to look like?
0
 
AshokCommented:
You mean

Coming Up at Cornerstone
11
Dec
Dinner

11
Dec
Wednesday Connection

11
Dec
Momentum

12
Dec
Faithful, Abundant & True

13
Dec
Celebrate Recovery

view all events this week

Height of the Blue background should be enough to have above fit inside, right?
0
 
axessJoshAuthor Commented:
yes, the blue background should expand its height with the height of the content.
0
 
AshokCommented:
Yes, I understand.  It is not fixed Height.
0
 
axessJoshAuthor Commented:
no
0
 
axessJoshAuthor Commented:
I have set a min-height: 200px;
0
 
AshokCommented:
Is this the code (for the footer that has blue background)?

#home-mid-content {
      min-height: 200px;
      position: relative;
      width: 960px;
      margin-bottom: 20px;
}
0
 
AshokCommented:
Try this!

#home-mid-content {
      height: auto;
      min-height: 200px;
      position: relative;
      width: 960px;
      margin-bottom: 20px;
}
0
 
axessJoshAuthor Commented:
I'll try that in the footer but the code for that area will start with #footer.
0
 
AshokCommented:
I am not sure, but you can try this.

#footer {
      height: auto;
      background:url(images/footer-bg.png) repeat;
      border-top: solid 4px #B2D341;
      border-bottom: solid 4px #B2D341;
      position: relative;
      
      clear: both;
}
0
 
AshokCommented:
#footer {
      height: auto;
      background:url(images/footer-bg.png) repeat;
      border-top: solid 4px #B2D341;
      border-bottom: solid 4px #B2D341;
      position: relative;
}
0
 
axessJoshAuthor Commented:
nope, height: auto didn't work.
0
 
Chris StanyonCommented:
Can't really see what the problem is - the blue background of your footer is big enough to contain all the elements within it - I've tested it on Firefox , IE and Chrome.

Am I missing something or have you solved this one?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.