Having difficulty changing the background color to black for the parent div that houses multiple child divs

Here is an example without the height attribute provided: http://jsfiddle.net/karthik64/pFcpX/

And here it is with the height attribute included: http://jsfiddle.net/karthik64/pFcpX/1/

The issue arises when I try to set a fixed 'height' attribute in order to achieve a black background color. If the height attribute is removed from the CSS property, the background-color does not display as black. It is important to note that the height of the div is dynamic and varies based on data fetched from a database.

I have attempted to use !important to override this, but it proved unsuccessful.

htmlcss

Answer №1

Include overflow: hidden in the style of the parent div

Check out this JsFiddle link

Answer №2

I made a small adjustment to your code. I inserted a new div right before the last closing div and assigned it a class name of clearfix. I also added clear:both to the clear fix class. You can now utilize this class wherever you have floating divs in your code.

Here's the modified HTML:

<div style="width:690px;background-color:#000000;margin-left:40px;margin-top:4px">

        <div style="float:left;width:310px;font-family:Arial,Helvetica,sans-serif;padding-left:30px; color:#fff;"> 

        <div style="font-size:1.6em;margin-top:15px"> Hello! </div>

        <div id="iamm"> Niko </div>

        <div style="font-size:12px"> I'm a Student </div>

        <div style="font-size:12px"> gender Male </div>

        <div style="font-size:12px"> I stay at India </div></div>

    <div class="clearfix"></div>
</div>

Feel free to check out the modified fiddle: http://jsfiddle.net/pFcpX/9/

Answer №3

To solve the layout issue, simply incorporate the following CSS into your stylesheet and apply the clearfix class wherever necessary. This is a common practice in HTML5 Bolerplate.

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

For a demonstration, refer to this fiddle: http://jsfiddle.net/pFcpX/10/

I have included the clear fix class in the top div with a black background for your convenience.

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

Connecting table checkboxes to buttons in Angular 4.x: A step-by-step guide

Exploring Angular 4.x for the first time and faced with a challenge. I have created an HTML table where each row contains a checkbox and buttons. My goal is to link the checkboxes with the buttons in such a way that when a checkbox is checked, the correspo ...

htmlangularcheckbox

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

Inject a dynamic URL parameter into an iframe without the need for server-side scripting

I'm really stuck and could use some assistance with the following issue, as I am unable to solve it on my own :( When a user is redirected to a form (provided via an iframe), there is a dynamic URL involved: website.com/form?id=123 The code resp ...

javascripthtmlurliframedynamic

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this: btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; So, wo ...

javascripthtmlcsswebdom

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... https://i.sstatic.net/FFCRW.png My goal is to show the loading indicator when any action, like deleting an item or changing qua ...

javascriptcssreactjsoverlaymobx-react

Tips for crafting HTML emails that avoid users inadvertently selecting extra spaces while copying and pasting

There is an email that I send out with a specific string that needs to be copied and pasted only once. The issue arises when users copy the string from Outlook as they tend to unintentionally include an extra space at the end of it. Although I understand ...

htmlhtml-emailcopy-paste

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

I am experiencing an issue with my ejs template that should greet the user by displaying their name when the page loads, but it is not showing anything. Here's a snippet of my template: <!DOCTYPE html> <html> <head> < ...

htmlexpressejs

What's the easiest method for moving div content from side to side?

Working on a plugin for WordPress, I am faced with the task of moving content in a slider from left to right and right to left. My current attempt is as follows: var effect = 'slide'; // Set the options for the chosen effect type var opti ...

javascriptjqueryhtmlwordpress

Updating the placeholder text of a textarea using a conditional statement in PHP

I currently have a textarea within a form that is being outputted: <textarea id='textarea' name='msg' rows='2' maxlength='255' cols='80' placeholder=' Share a thought...'></textarea> ...

javascriptphphtml

Disappearing act: CSS3 transform - rotate makes font vanish

When applying a simple css3 transformation rule to an html element which contains various other elements like h1, h2, inputs, and img, I encounter the following issue: div{ -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skew ...

cssfontsrotationtransform

How to customize the arrow color of tooltips in Bootstrap 4

After spending an hour searching online, I still can't figure out how to change the tooltip arrow color to red. None of the code snippets I found seem to work for me. My latest attempt was: .tooltip-arrow { border-right-color: red; border-left-c ...

cssbootstrap-4twitter-bootstrap-4

How can we use Python and Selenium to retrieve the text from HTML that includes the <p> tag?

I have a simple question that I hope you can help me with. I'm not feeling well and struggling to complete my presentation because my brain just isn't functioning properly. Here is the HTML code in question: <p> <b>Postal code:& ...

pythonhtmlpython-3.xselenium

What is the best way to perfectly center my CSS menu in a fluid style layout?

Can you assist me with this issue? I am trying to center my CSS menu precisely in the middle of the user's screen, both vertically and horizontally. Since users have varying screen resolutions, I need a fluid example to achieve this. Below is the HT ...

htmlcss

show items in UL LI elements as "inline" within a bootstrap column

Struggling with organizing UL LI items in a bootstrap setup? Trying to make them align horizontally instead of vertically but can't figure it out. Here's my code: <div class="container-fluid" style="margin-bottom:45px;"> <div cl ...

htmlcssbootstrap-4

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

cssjquery-ui

Creating a smooth image transition effect using CSS

I have successfully implemented a code that allows for crossfading between images when the mouse hovers over them. Now, I am looking to modify the behavior so that the crossfade effect happens only once when the mouse passes over the image. In other words ...

htmlcssfading

Designing a hierarchical HTML dropdown menu for choosing an XML file for parsing using a jQuery script

I have successfully created a question and answer framework using Jquery and XML files. Users can choose a specific category of questions from a drop-down menu, which then displays the corresponding questions and answers from the selected XML file. While ...

jqueryhtml

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

I am attempting to create an interactive SVG map of Europe. Each country is represented by a path element, and I want the opacity of a country to change to 0.5 when it is hovered over. Despite trying to define a JavaScript function for this purpose, noth ...

javascriptcsssvg

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Sorry, the form submission could not be processed and unfortunately no error message was provided by: contact.php

Encountering an Issue This is the PHP code I am working with: <?php // PHP code goes here Here is a snippet of my HTML contact form code: <div class="col-lg-8"> <form action="contact.php" method="post" ro ...

phphtmlformscontactscontact-form