What are some ways I can ensure my DIV is transparent?

I am struggling with the code below:

<div class="clearfix">
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
</div>

<div class="mdl_ftr"></div>

.clearfix:after{
  clear: both;
  bdy: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.mdl_ftr {
    min-height: 69px;
}
.mdl_ftr {
    background: Red;
    min-height: 45px;
}

You can view an example fiddle here

My problem is regarding the background color of mdl_ftr. It currently starts right at the top left corner of the first label. I want it to follow the labels and not overlap them as a background. Is there a straightforward way to achieve this?

Any assistance on this matter would be highly appreciated.

csscss-float

Answer №1

When working with floating elements, it is a common practice to incorporate another element that can clear content within the layout. This helps prevent any unexpected overlapping or misalignment issues. Here is an example:

<div class="clearfix">
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
</div>

<div class="clearfloat"></div>
<div class="mdl_ftr"></div>

To ensure proper clearing of floated elements, you can simply add the following CSS rule to this element:

.clearfloat { clear: both; }

Answer №2

Don't overlook the overflow:hidden CSS property!

Try replacing your existing CSS with this:

.clearfix {
    overflow:hidden
}
.mdl_ftr {
    background:red;
    min-height:45px
}

Alternatively, for a more effective solution:

HTML:

<div style="float:left; padding-right:1%">
    <label class="adm">Created</label>
</div>
<div style="float:left; padding-right:1%">
    <label class="adm">Created</label>
</div>

<div class="mdl_ftr"></div>

CSS:

.mdl_ftr {
    background:red;
    min-height:45px;
    clear:both
}

You may also want to consider using an ID instead of a class for your footer element. (Assuming you only have one footer on the page.)

Answer №3

When positioning the labels to the right, ensure that your mdl_ftr is contained within your clearfix and styled with float:left;. If this is not the case, consider assigning a height value to your clearfix

Answer №4

It's quite simple to achieve. I inserted a div.clear at the conclusion of your div.clearfix and integrated the following snippet into your CSS code: .clear { clear: both; height: 1%; }

<div class="clearfix">
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
<div style="float: left; padding-right: 1%;">
<label class="adm">Created</label>
</div>
           <div class="clear"></div>
</div>

<div class="mdl_ftr"></div>

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

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...

cssangularangular-materialangular8

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so ...

cssangular-materialangular7virtualscrollangular-cdk-virtual-scroll

Strategies for reducing the amount of space between cards in Bootstrap 4

After creating 4 cards using Bootstrap version 4.5, I noticed that the spacing is not right. I'm struggling to reduce the spacing between the cards. Have a look at the image below if you're still confused: https://i.sstatic.net/RrJLL.jpg .car ...

htmlcssbootstrap-4

The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example: export default function thing(){ const elem = function(){ return (<div className="myCss">Hello< ...

cssreactjsnext.jsstyled-jsx

Selecting the initial and final elements in a list without utilizing pseudo-classes

Currently, I am in the process of designing a custom MUI styled component and I have encountered a challenge. I want to apply extra styles specifically for the first and last child elements. The issue arises because MUI utilizes the emotion styled library, ...

cssreactjsmaterial-uistyled-components

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

Eliminate the use of burger icons in a theme inspired by the

Is there a way to eliminate the burger menus in the "Eighties" Wordpress theme and substitute it with a classic navigation menu (logo on the left & menu on the right) positioned above the header image? I've attempted to modify the header.php and func ...

phpcsswordpressnavigation

Bootstrap 4 Collapse - Ensuring that collapsed elements remain open when expanding other accordions

Can someone help me figure out how to keep an element open when another one is opened? Here is an example: https://getbootstrap.com/docs/4.0/components/collapse/ <div id="exampleAccordion" data-children=".item"> <div class="item"> & ...

javascripthtmlcssbootstrap-4

Increase the spacing within div columns containing rows of uniform height

Is there a way to add some extra space between the H3-1 div and the H3-2 div? Ideally, I would like to achieve this without using custom CSS, but if necessary, that's okay too. I'd prefer to stick with the col-sm-6 class instead of using col-sm ...

htmlcssbootstrap-4

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together. For instance: 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-3 ...

javascriptcssregexcss-transforms

Jquery failing to function properly when scrolling

I have been attempting to implement a feature where an element changes its position to fixed after scrolling past a certain point. However, no change occurs when I scroll. In the <head> section of my code, I have included <script src="stiler/jquer ...

jqueryhtmlcss

Is it possible to modify the background color of a checkbox?

I am looking to modify the background color of the checkbox itself, specifically the white square. I have spent a lot of time researching this topic but most articles suggest creating a div and changing its background color, which does not affect the whi ...

jqueryhtmljquery-uicssjquery-plugins

Enhance the appearance of the og:image by applying CSS styling

Can CSS styling be applied to a dynamic facebook og:image used for Facebook shares? Instead of using a static image, I'd like to add some custom styling such as a colored block in the top right corner with styled text. Currently, my tag simply grabs ...

cssfacebook-opengraph

Having trouble transferring my background image from my FTP to my website

I'm having trouble setting a background image for the header on my website. It seems that nothing is loading. The hosting service I use has disabled linking images via external URLs, so I tried uploading the image to Filezilla, but that didn't wo ...

htmlcssftp

Picture not displaying properly in alternative browsers

While working on a simple website using html and css, I encountered an issue where my logo was not displaying for users on different browsers. Here is the image description Below is the HTML code: <section id="header"> <div class=& ...

htmlcssimage

The expand button vanishes as soon as the collapse occurs

In the code snippet provided, there is a button in each row that serves two functions: expanding and collapsing the specific row where the button is located. <div class=""> <ul> <li ng-repeat="nav in ciRelationshipHier ...

htmlcssangularjsuser-interface

Is there a way to implement this toolbar in Ionic Angular?

https://i.sstatic.net/sGd1o.png I am looking to replicate the toolbar shown in the image above using Ionic. As a beginner in Ionic development, I am finding it challenging to translate the design into code. I attempted to use a grid layout, but the varyin ...

javahtmlcssionic-frameworkionic4

Make the div disappear upon clicking the back button in the browser

When a user selects a thumbnail, it triggers the opening of a div that expands to cover the entire screen. Simultaneously, both the title and URL of the document are modified. $('.view-overlay').show(); $('html,body').css("overflow","h ...

javascriptjqueryhtmlcss

Tips for creating CSS Grid elements that stay fixed to the viewport

I am attempting to achieve a 100vh viewport with multiple responsive overlays on top of it. I have managed to fix the header element on the viewport using position: sticky, but I am encountering issues with making the rest work in the same way. Additional ...

csscss-positioncss-gridfixed