Member Avatar for sarnol20

I'm relatively new to web development and I'm hoping this is a simple fix. I have a Body div and a left column and right column div inside that body div. I want the body div background to show not the column divs(which cut out some of the white background destroying the flush look I'm going for).

Here is what I'm talking about:

This is what I want the body to look like:

I dont like the way to background get clipped in the first one, any help would be great. Thanks!

  • 2 Contributors
  • 2 Replies
  • 196 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by sarnol20

Dani AI

Generated

The problem is that your left/right columns are floated, so the container (your "body" div) doesn't expand to contain them. That causes the background to appear "cut off." 's temporary fixed-height hack will mask the symptom but breaks when content changes. 's clearing approach works, but there are cleaner, more robust options.

A recommended, semantic fix is the clearfix pattern (adds no extra markup and works well across browsers). Add a class to the container and this CSS:

/* add to the container that wraps your floated columns */
.container::after {
  content: "";
  display: table;
  clear: both;
}

That makes the container include its floated children without inserting empty elements in the HTML.

Two quick alternatives:

/* create a new block formatting context so the parent contains floats */
#bodyPan { overflow: auto; } /* or overflow:hidden but beware clipping shadows/overflows */
/* modern approach: avoid floats and use flexbox */
#bodyPan { display: flex; align-items: stretch; }

Notes and troubleshooting:

  • Avoid fixed heights for containers — it breaks responsiveness and dynamic content.
  • If you use overflow:auto watch for unwanted scrollbars; overflow:hidden can clip drop shadows.
  • Switching to flexbox changes how margins and alignment behave, so adjust child widths or flex values accordingly.
  • Use browser DevTools to inspect computed heights and backgrounds to confirm the parent contains children.

Any of these methods will keep the parent's background visible behind the columns while staying resilient to content changes.

Recommended Answers

All 2 Replies

Member Avatar for bubbafunk1

Try this, open your html file just after the code that reads

<div id="MiddleRightPan"></div>

put this code after the closing div

<div class="clear_both"></div>

then open your .css file and put this code, anywhere you like.

.clear_both {
clear: both;
}
Member Avatar for sarnol20

That worked wonderfully! And just in time to, I found a quick fix by setting a static value for the bodyPan height(though I knew it wasn't the correct way) Thanks bubba!

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.