html - How to stop a div from inheriting parent css style -


i have 2 .scss stylesheets contributing 1 website. can have base, , home stylesheet.

in base style sheet, div has float of left, in section there no float. cant seem fix issue. advice appreciated!

here jsfiddle - https://jsfiddle.net/hbyeyv6y/

here base .scss -

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

here .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; }

as said, float: none !important; , initial !important; other rules. if want write code, asigning float body, html , on doesn't idea. float breaks usual behaviour of elements , can lead unexpected results. add clases like:

.f-left{    float:left; }

only elements want float.


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more