CODEWITHSUNDEEP
htmlcss
Tom Walsh
Tom Walsh

Reputation: 117

How to stop a div from inheriting parent css style

I have two .SCSS stylesheets contributing to one website. This is so that i can have a base, and a home stylesheet.

In the base style sheet, div has a float of left, however in the What We Do section i would like there to be no float. i cant seem to fix the issue. Any advice would be greatly appreciated!

Here is the JSFiddle - https://jsfiddle.net/hbyeyv6y/

Here is the Base .scss -

body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }

Here is the What We Do .scss -

div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; }
    div.whatwedo .inner { float: none; }
    div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; }
    div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; }
    div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; }
    div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; }
    div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; }
    div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; }
    div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; }
    div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }

Upvotes: 2

Views: 1128

Answers (2)

Jayx
Jayx

Reputation: 3966

.whatwedo is not floating - all it's parents and all it's descendants are though. Setting a float on everything is bad; why do you need to float everything?

Even so, to answer your question - you can unset the float for all .whatwedo's descendants with the wildcard selector ...

.whatwedo * {float: none;}

Upvotes: 1

Vandervals
Vandervals

Reputation: 6054

As said, you could do float: none !important; and initial !important; for other rules. But if you want to write good code, asigning float to body, html and so on doesn't look like a good idea. Float breaks the usual behaviour of the elements and it can lead you to unexpected results. You could add clases like:

.f-left{
   float:left;
}

only to the elements you want to float.

Upvotes: 2

Related Questions