Gap at bottom of page where elements floated out of

[Tinnin]

Hi All,

I have a problem with my web page. I'm floating some content to the left so the image below can move up to the right. The content and image are contained in a div with a height set to 100%. When I remove the height or decrease it, the image moves down the page to where it began. Either way, the gap where the image started never decreases. I'm aiming for it to just go away so that the content reachers the footer.

This occurs more noticably in the smaller width view using the media query.

I assume it has something to do with some percentages/height or whatnot that I've set earlier but I can't seem to fix the problem.

The html source:

<div id="page>
    <div id="content">

    <div id="about_content">
        blah...
    </div>

    <img src="image.jpg" id="about_img"></div>
</div>

The css:

html, body
{
    margin: 0;
    padding: 0;
    color: #555;
    font: normal 1em Arial,Helvetica,sans-serif;
        height: 100%;
        width: 100%;
}

#page
{
    margin: 0;
    background-color: white;
        height: 100%;
        width: 100%;
}

#content
{
        padding: 0.5%;
        height: 100%;                      
}

#content p
{
    font-size: 1em;
    height: 100%;
}

#about_content
{
        width: 40%;
        padding: 20px;
        margin-left: 10%;
        float: left;
}

#about_img
{
        max-width: 25%;
        margin-right: 15%;
        float: right;
        position: relative;
        bottom: 10%;
}

@media screen and (max-width: 768px) {
    /* reset all content areas to full width of media query */
    #page, #header, #footer, #content {
            width: 768px;
    }
    #about_content {
            margin-left: 5%;
    }
    #about_img
    {
            margin-right: 5%;
            max-width: 45%;
            bottom: 55%;
    }
}

Thanks for any help offered.

[Tinnin]

In fact, it seems to be happening on all pages. I'm assuming it is the #content height then.

[gabrielcastillo]

I tested the code you provided and seems you are missing a double quote in the parent div<div id="page">

Other then that, I did see much going on.

[Taywin]

The reason the gap between your "about_content" and "about_image" will never be decrease is because you are setting content element to the far left and the image element to the far right. If you want the image element to be next to the content, you need to float it to the left and it will try to fit to the space. If there is not enough space for it, then it will fall down to the next line.

Another way to do this without using float is to use "display:inline;" but it may not result in the exact way you want (the text part will be display using the image's base as its base line).