Solved

Background loses height with floated elements

Posted on 2013-12-10
16
132 Views
Last Modified: 2013-12-30
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.
0
Comment
Question by:axessJosh
  • 8
  • 6
  • 2
16 Comments
 
LVL 13

Expert Comment

by:Ashok
ID: 39709690
So you want the height to be bigger than what it is now?
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39709695
yes, I'd like the height of the blue background to expand with the height of the 3 floated columns.
0
 
LVL 13

Expert Comment

by:Ashok
ID: 39709697
Can you copy the image of the page and edit to make it look like how it supposed to look like?
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 13

Expert Comment

by:Ashok
ID: 39709702
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
 
LVL 2

Author Comment

by:axessJosh
ID: 39709705
yes, the blue background should expand its height with the height of the content.
0
 
LVL 13

Expert Comment

by:Ashok
ID: 39709708
Yes, I understand.  It is not fixed Height.
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39709718
no
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39709721
I have set a min-height: 200px;
0
 
LVL 13

Expert Comment

by:Ashok
ID: 39709736
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
 
LVL 13

Expert Comment

by:Ashok
ID: 39709754
Try this!

#home-mid-content {
      height: auto;
      min-height: 200px;
      position: relative;
      width: 960px;
      margin-bottom: 20px;
}
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39709773
I'll try that in the footer but the code for that area will start with #footer.
0
 
LVL 13

Expert Comment

by:Ashok
ID: 39709783
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
 
LVL 13

Expert Comment

by:Ashok
ID: 39709791
#footer {
      height: auto;
      background:url(images/footer-bg.png) repeat;
      border-top: solid 4px #B2D341;
      border-bottom: solid 4px #B2D341;
      position: relative;
}
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39709904
nope, height: auto didn't work.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39710956
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39710962
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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS issue in Nested Master Pages 9 26
Customizing jQuery UI Accordion CSS 3 28
removing a class in javascript 4 49
Media Queries  not Firing 6 19
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question