Member Avatar for Woobag

So I have this html code:

<div id="blog" class="grid_16_1">
<div class="blog_wrapper">
<span class="left_align"><h3>From the Blog</h3></span>
<span class="right_align meta">Posted November 1st, 2009</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Which is under a bunch of other stuff, and right above my footer.

The problem is my repeating background image isn't going under the text toward the bottom, where it should be, but the background is just aligning to the top of the entire page.

Here is some the relevant css code:

.left_align {
	clear:both;
	float:left;
}

.right_align {
	float:right;
}

.blog_wrapper {
	margin-left:70px;
	width:820px;
	padding: 5px 0 5px 0;

	height:117px;
}

#blog {
       	background: url('../img/blog_tile.png') repeat-x;
	height:117px;
	margin:0;
	
}

#blog h3 {
	font-size:15px;
	font-weight:bold;
}

#blog .meta {
	font-size:11px;
}

#blog p {
	margin-top:-17px;
	float:left;
}

My code doesn't completely validate in HTML yet, but I haven't found any relevant errors from the few that are listed.

Some help would be appreciated!

  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Woobag

Dani AI

Generated

Good catch by — the repeating-tile looked wrong not because of repeat-x but because the DOM was broken by an invalid empty element. was right to check the background repeat, but the real root cause was the self-closing clearing element: in HTML you must not use XHTML-style self-closing syntax on non-void tags, so the browser/parser ends up with a different DOM and the layout (and background placement) breaks.

Why this matters: only void elements are self-closing in HTML. Using a self-closing DIV will not reliably create the empty node you expect unless the document is served as true XHTML, so floats are left uncleared and parent boxes can collapse or mis-position. See the HTML/void-elements guidance for details: Void elements (MDN).

Better fixes (avoid adding empty markup):

  • Use a modern clearfix on the parent that contains the floats. Add a CSS rule like this and apply it to the wrapper that holds the left/right floats:
.your-wrapper::after {
  content: "";
  display: table;
  clear: both;
}
  • Or create a new block formatting context: display: flow-root on the wrapper, or overflow: auto as a quick fallback.

These keep layout in CSS rather than inserting presentational empty elements. For reference and variants of the clearfix pattern see this primer: Clearfix (CSS-Tricks).

Quick troubleshooting checklist: validate the HTML (validator.w3.org), inspect the DOM with browser devtools to confirm element boundaries and computed heights, and avoid negative margins/floats on simple text nodes where possible — consider flexbox/grid for predictable, float-free layout.

Recommended Answers

All 2 Replies

Member Avatar for webexpertzhere

You have provided repeat-x to the bg image and it will repeat horizontally alone. Probably thats the reason you see it at the top of the entire page. Instead of repeat-x, provide repeat so that it spans horizontally and vertically.

Please let me know if this solves your issue.

Member Avatar for Woobag

Thanks, but unfortunately it is repeating correctly, just in the wrong location. It is a 1x117 image that is meant to repeat horizontally.

I figured out the problem. Since it seemed my CSS code was fine, I looked into my html, and it turns out that was the problem.

I needed to have a empty div with class "clear" applied to it. For whatever reason I thought you could do this as so:

<div class="clear" />

But you must do it like this I think:

<div class="clear"></div>
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.