Search code examples
cssimagefooter

CSS - Images and Footer Problems

Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html

You will notice 2 layout issues

Problem 1 - Images need to be below GOLD

This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.

Next Layout issue:

Footer is cutting off the body content

I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.

Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(

EDIT

Here is a pic of what it looks like when applying the container div a 100 pixel height value:

div with 100 pixel height

It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?

Solution

  • here's a fix for one 

    .body {
    background-color: #FFFFFF;
    padding: 2em 2em 52px 0;
}

    you have 3 logo's in one div, on that div add a height, for example 

    element.style {
    height: 100px;
    position: relative;
    width: 100%;
}

    Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/

    When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;

    this is the result i get

    enter image description here