CODEWITHSUNDEEP
css
user4190800
user4190800

Reputation:

I understand that float elements have no height. So how do I accomplish the following?

I have the following CSS

        .myClass > div:nth-of-type(1) {}
            .myClass > div:nth-of-type(1) > div {}
                .myClass > div:nth-of-type(1) > div > div:nth-of-type(1) {float: left; width: 25%;}
                .myClass > div:nth-of-type(1) > div > div:nth-of-type(2) {float: right; width: 70%;}

which is not working because the floated elements are causing their outer element (namely .myClass > div:nth-of-type(1) > div) to have no height, causing rows to get their content to spill on top of one another. Is there any way without using float that I can keep the behavior of having .myClass > div:nth-of-type(1) > div > div:nth-of-type(1) and .myClass > div:nth-of-type(1) > div > div:nth-of-type(2) side-by-side with widths of 25% and 75% ???

Upvotes: 0

Views: 33

Answers (3)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Use display: inline-block instead of float :)

.myClass > div:nth-of-type(1) > div > div:nth-of-type(1) {display: inline-block; width: 25%;}
.myClass > div:nth-of-type(1) > div > div:nth-of-type(2) {display: inline-block; width: 70%;}

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

You could do this:

.myClass > div:nth-of-type(1) > div {overflow: hidden;}

The point is, you just need to enclose your floats (that is, force the container to wrap around the floated children). There's also the "clearfix" method for this.

Upvotes: 0

eclipsis
eclipsis

Reputation: 1550

I believe setting the parent div to overflow: auto would prevent the parent divs from collapsing.

Upvotes: 0

Related Questions