Member Avatar for welkam


I am trying to make wordpress template out of regular html template and i dont understand why div id"contetn" is not changing its height according to content that it is inside. I dont think that wordpress has something to do with this.

  • 1 Contributor
  • 1 Reply
  • 72 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by welkam

Dani AI

Generated

As discovered, the container was collapsing because its children were floated and the float wasn't cleared. Floated elements are removed from normal flow, so a parent with only floats can report zero height. The quick HTML fix (adding a clearing element) works, but there are cleaner, more maintainable CSS approaches and a few debugging checks to run when converting static HTML into a WordPress theme.

Try one of these CSS fixes instead of adding markup for every container:

/* clearfix using a pseudo-element */
.container::after {
  content: "";
  display: table;
  clear: both;
}
/* make the container establish a new block formatting context */
.container {
  overflow: auto; /* or overflow: hidden; be aware this can clip visible overflow */
}
/* modern, semantic option (wide browser support now) */
.container {
  display: flow-root;
}

Debugging checklist:

  • Inspect the rendered HTML in the browser (View Source / DevTools) to confirm all wrapper tags from header.php/footer.php are present and correctly closed.
  • Use DevTools to see which children are floated or absolutely positioned; those won't expand the parent.
  • Beware of overflow clipping interactive elements (dropdowns, tooltips).
  • Validate the page doctype; quirks mode can change layout behavior.

For reference on behavior and browser support, see the CSS display and overflow documentation on MDN: display (flow-root) and overflow.

Member Avatar for welkam

I missed <div class="cleaner"></div> inside div content at bottom with css

.cleaner {
clear: both;
}
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.