Ways to prevent a div element from inheriting the styling of its parent container

I am facing an issue with two .SCSS stylesheets on my website. One serves as a base, while the other is for the homepage.

In the base stylesheet, the div element has a float of left. However, I want to remove this float specifically in the What We Do section but I can't seem to resolve the problem. Any suggestions would be highly appreciated!

For reference, here is the JSFiddle link - https://jsfiddle.net/hbyeyv6y/

This is the content of the Base .scss file:

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

And here is the code from the What We Do .scss file:

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; }
htmlcss

Answer №1

One way to handle this is by using float: none !important; and initial !important; for specific rules instead of assigning float properties to body, html, and other elements. It's important to note that using float can disrupt the normal flow of elements and potentially result in unexpected layout issues. To address this, create classes like:

.f-left{
   float:left;
}

and apply them only to the elements you want to float.

Answer №2

.whatwedo is not positioned as floating - all of its ancestors and descendants are, however. Applying a float to every element is not recommended; what is the purpose of floating everything?

Nevertheless, in response to your query - you can remove the float property for all descendants of .whatwedo using the wildcard selector ...

.whatwedo * {float: none;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to retrieve the value from the searchbar on the server?

I'm seeking assistance on how to retrieve the user-entered value from a search form on my HTML page in my server.js file. I understand that the name/value pair will be cityCode=something, but I'm unsure of the next steps. HTML: <form c ...

javascripthtml

Having Multiple Login Forms on a Single Page

I have encountered an issue with my login form code. It works perfectly as a single form, but I need to have 20 of these forms on one page. Despite my efforts to duplicate the code for each new form and adjusting the IDs, I am unable to make more than one ...

javascriptjqueryhtmlformsauthentication

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

phpjavascripthtml

Styling with Chemistry: CSS for Chemical Formulas

Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...

phpcssformulaequations

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

javascriptphpjqueryhtml

Looking for help organizing a navigation bar?

I recently embarked on the journey of creating my own website and I am in need of assistance from individuals who possess expertise in CSS and HTML. The specific challenge I'm currently facing involves aligning the navbar elements properly. I aim to p ...

htmlcssbootstrap-5

Angular - Customizing button bindings for various functions

As a newcomer to Angular and TypeScript, I am faced with the task of creating a customizable button that can display text, an icon, or both. For example: button-icon-text-component.html <button> TEST BUTTON </button> app.component.html & ...

htmlangulartypescriptcomponentsfrontend

Configuring Media Query for iPad Air and iPad Pro

I'm facing a challenge setting up media queries for different iPad devices in my Next.js code. I have three cards (or divs) arranged in a row, utilizing the React-Bootstrap grid system for layout. While the cards default to full width within the grid ...

htmlcssnext.jsipadresponsive-design

Discover the latest CSS styles and HTML attributes that impact the dimensions of an image

I am in the process of developing a custom jQuery plugin that will enable me to easily change the "src" attribute of an image on my website based on the width of the browser. However, I've encountered an issue where when the new image is loaded, the ...

javascripthtmlcss

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

Layer images of the same size in a seamless overlap on top of another image

As a novice web developer, I am aiming to stack two images perfectly on top of each other in my project. The application I am working on checks the correctness of user inputted answers by displaying either a checkmark or an "X" mark accordingly. To achieve ...

javascripthtmlcssimage

Tips for maintaining the size of a div container

Take a look at the following code snippet: <head> <title></title> <style> .section_divs { background-color: lightblue; float: left; } #section_empty { background-color: tomato; width ...

htmlcss

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

htmlfacebookflashfacebook-opengraphgrooveshark

Elevate the size of the hero section

Is there a way to increase the height of my jumbotron without adding it in the class attribute, as it would affect responsiveness? I want it to look like this, but currently, it appears as this. Below is my code: Html: <div class="container"> ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

htmlcss

What is the method to display just the final 3 characters within a paragraph?

Is there a way to display only the last three characters of a string using either a method or a string method? I consistently have a 13-digit number, but I specifically require showing only the final three digits. Appreciate any assistance provided. Than ...

javascripthtmlcssreactjs

Tips for creating a cursor follower that mirrors the position and size of another div when hovering over it

I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...

javascripthtmljquerycss

Change an image seamlessly without any flickering, and display the new one instantaneously

TL;DR: How can images be swapped smoothly without causing page flicker while indicating loading status? I am facing an issue with swapping between 2 images using buttons. The first image loads fine, but the second image doesn't display until it' ...

javascriptjqueryhtmlimage

Switching between numerical and alphabetical input using JQuery

How can I switch between allowing character and numeric input in a textbox? I currently have a JQuery function that restricts input to numbers only $('.numeric').on('input', function (event) { this.value = this.value.replace(/[^0 ...

javascriptjqueryhtmlvalidation

Retrieving the value of a radio button using jQuery and Ajax

Looking for assistance with radio buttons... <input type="radio" id="flip" name="flip" value="Head" checked="checked" /> Head <input type="radio" id="flip" name="flip" value="Tail" /> Tail I'm attempting to process a form with ajax, try ...

javascriptjqueryhtmlajax