axessJosh
asked on
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.
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.
So you want the height to be bigger than what it is now?
ASKER
yes, I'd like the height of the blue background to expand with the height of the 3 floated columns.
Can you copy the image of the page and edit to make it look like how it supposed to look like?
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?
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?
ASKER
yes, the blue background should expand its height with the height of the content.
Yes, I understand. It is not fixed Height.
ASKER
no
ASKER
I have set a min-height: 200px;
Is this the code (for the footer that has blue background)?
#home-mid-content {
min-height: 200px;
position: relative;
width: 960px;
margin-bottom: 20px;
}
#home-mid-content {
min-height: 200px;
position: relative;
width: 960px;
margin-bottom: 20px;
}
Try this!
#home-mid-content {
height: auto;
min-height: 200px;
position: relative;
width: 960px;
margin-bottom: 20px;
}
#home-mid-content {
height: auto;
min-height: 200px;
position: relative;
width: 960px;
margin-bottom: 20px;
}
ASKER
I'll try that in the footer but the code for that area will start with #footer.
I am not sure, but you can try this.
#footer {
height: auto;
background:url(images/foot er-bg.png) repeat;
border-top: solid 4px #B2D341;
border-bottom: solid 4px #B2D341;
position: relative;
clear: both;
}
#footer {
height: auto;
background:url(images/foot
border-top: solid 4px #B2D341;
border-bottom: solid 4px #B2D341;
position: relative;
clear: both;
}
#footer {
height: auto;
background:url(images/foot er-bg.png) repeat;
border-top: solid 4px #B2D341;
border-bottom: solid 4px #B2D341;
position: relative;
}
height: auto;
background:url(images/foot
border-top: solid 4px #B2D341;
border-bottom: solid 4px #B2D341;
position: relative;
}
ASKER
nope, height: auto didn't work.
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?
Am I missing something or have you solved this one?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.