Question

this is my age-old problem and I’ve never found a real solution for this so I’m finally just asking for help.

HTML

<section class="cols-2">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>

        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>
</section>
<section … 

CSS

.cols-2 .wrapper {
        margin:0;
        float: left;
        width: 50%;
    }

So I have two columns that are floated inside of my section.cols-2. In this case the section doesn’t have an automatic height!

e.g. if I want another section with flaots immediately after this one I can’t apply a margin between the two sections.

I don’t want to apply a height value, I just need both sections to be apart from each other by a specific margin.

See my example: http://jsfiddle.net/kWtev/

Thank you for your tipps and tricks, I appreciate it.

Answer 1

You need to clear the floats. This is not only your age-old “problem”, but every sitebuilder’s. But luckily, age-old problems have age-old solutions.

There are several clearing techniques available on the Internet, one of the most common is using overflow: hidden on the container. One of the “magic” side effects of overflow: hidden is clearing floats.

.cols-2 { overflow: hidden; }

jsFiddle Demo

---

Of course you could simply use clear: left, and there will be space between the containers, but the last one still won’t have a nonzero height.

.cols-2 { clear: left; }

Some clearing techniques solve this by inserting another element (like an empty div or a pseudo-element) that has clear: left applied on it.