CODEWITHSUNDEEP
htmlcsscss-float
matt
matt

Reputation: 44413

CSS: how to apply margin to a container with floats?

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.

Upvotes: 1

Views: 243

Answers (5)

ChristopheCVB
ChristopheCVB

Reputation: 7305

Have you ever thought using :

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid black;
-webkit-column-gap: 20px;

of course -webkit- prefix has to be replaced with other prefixes in order to be larger compatible...

If the behavior you are expecting allow this...

Example

Upvotes: -1

Dipak
Dipak

Reputation: 12190

The best solution would be using 'clearfix' for the parent container. 

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

<section class="cols-2 clearfix">
        <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>

You can use clearfix for any container that has floated elements in it. You need to put the clearfix css at the very end of your css file.

Just add the one class and your are done!

Upvotes: 1

kapa
kapa

Reputation: 78741

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.

Upvotes: 2

khurram
khurram

Reputation: 946

can you please check this DEMO, it may help you

.cols-2 {
    margin:20px 0;
    overflow:auto;    
}

Upvotes: 0

izolate
izolate

Reputation: 1600

.cols-2 { overflow: auto; } will solve your issue caused by floated elements.

Upvotes: 1

Related Questions