Member Avatar for 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.

Edited by Tinnin
  • 3 Contributors
  • 3 Replies
  • 192 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Brief diagnosis: the layout gap is the classic result of floated elements being removed from normal flow while their parent has an explicit height and the image is being nudged with relative positioning. The missing quote that pointed out should be fixed first (invalid HTML can produce unpredictable box sizes). As observed, floats will drop to the next line when there’s not enough inline space — nudging a floated image with bottom only hides the symptom and preserves the empty space.

Practical, low-risk fixes that collapse the gap:

  • Remove the explicit height: 100% on the content block and on paragraphs so the container can grow to fit its children.
  • Contain the floats instead of forcing container height. A minimal clearfix works reliably:
#content:after {
  content: "";
  display: table;
  clear: both;
}

An alternative is to give the parent a new BFC: #content { overflow: auto; } — this will cause the parent to expand to include floats.

For a more robust responsive layout, replace left/right floats with a flex container so elements naturally sit side-by-side or wrap when space is tight. Example pattern (replace the original floats and remove position: relative nudges):

.row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.about_content { flex: 1 1 60%; }
.about_img     { flex: 0 0 25%; }

Quick troubleshooting checklist tied to the thread: (1) fix the HTML syntax error noted by ; (2) remove hard 100% heights; (3) remove bottom positioning on the image and let layout do the work; (4) contain floats with clearfix/overflow or switch to flexbox; (5) in media queries avoid forcing fixed container widths (use max-width or width:100% so wrapping behaves predictably). These steps address the gap while keeping the layout responsive.

Recommended Answers

All 3 Replies

Member Avatar for Tinnin

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

Member Avatar for 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.

Member Avatar for 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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.