Member Avatar for Violet_82

HI there, I am a little puzzled about how to position few divs in a site I am working on, here's the url
Basically here the idea is that the yellow main div .content is the content wrap and should be around all the content of the page. That worked fine till I floated left the .navigation (magenta with the navigation) box and the .paragraph (black with the text) one, so now they are outside the yellow box.
Now from memory some time ago I read somewhere that if you float something you remove it from the normal flow, which is why presumably they are now not inside the yellow box anymore, if that's the case how do I bring them back inside?
thanks

  • 2 Contributors
  • 4 Replies
  • 105 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Short answer: ' fix works because floated children are taken out of the normal flow, so the wrapper (.content in your case) no longer grows to contain them. Inserting a clearing element forces the layout to break beneath the floats, which makes the parent compute a correct height. That solves the symptom, but inserting empty markup purely for presentation is not ideal long‑term.

Two cleaner options to contain floats without extra HTML:

/* create a block formatting context (no extra markup) */
.wrapper {
  overflow: auto;
}
/* modern, semantic fix — makes the element contain its floats */
.wrapper {
  display: flow-root;
}

If you're replacing float-based layout entirely, use Flexbox:

.container {
  display: flex;
}
.container > .nav { flex: 0 0 200px; }
.container > .content { flex: 1; }

Practical notes and troubleshooting:

  • Apply the wrapper rules to your page wrapper (your .content element) and inspect in DevTools to confirm the wrapper height updates.
  • Avoid overflow: hidden unless you want overflow clipped; overflow: auto is safer.
  • display: flow-root is supported in modern browsers and is the cleanest way to contain floats without extra HTML; for very old browsers fall back to the clearfix pseudo-element technique.
  • If floats still behave oddly, check that floated elements have widths and that the clearing/containment is at the same DOM level as the floats.

Summary for : ' clear trick is correct and simple, but consider using display: flow-root or overflow: auto on your .content wrapper (or migrate to Flexbox) for a cleaner, markup‑free solution.

Recommended Answers

All 4 Replies

Member Avatar for floatingDivs

After something's been floated, it has to be cleared on the SAME level. So, after the div with class paragraph, create yet another div and give it a class clear. NOTHING GOES BETWEEN THE STARTING TAG AND ENDING TAG OF A CLEAR!

The CSS style is a simple clear:both;

<div class="paragraph">...</div>
<div class="clear"></div>

Member Avatar for Violet_82

Hi floatingDivs : - ),
thanks for that. Yes it works perfectly (I tried on the local copy of the website so it's not live). Now, what's that empty div doing then, I mean how does it fix it?
With that I am basically creating an extra box and make sure that floating elements are not allowed right and left of it, so I presume the box is pushed down or something like that ...I have read few things about the clear:both but didn't find anything about empty div. So how does your trick work or if you have a link to sth will do it too : - )?
thanks

Member Avatar for floatingDivs

It doesn't have to be a div. It can be a break tag (<br />), a span tag, or any other tag. It's just an attribute that resets anything following it to a non-floating position (the default value for float is none).

Member Avatar for Violet_82

ok thanks for that!

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.