Unable to view the CSS for background color

For the codeContainer class, the background-color is not displaying as expected. It seems like it may be covered by the menu bar. How can I adjust the background-color or positioning to make sure it shows up correctly?

http://jsfiddle.net/5qd5bL7o/

<div class="codeContainer" id="htmlContainer">
ssd
</div>

<style> .codeContainer { background-color: blue; height: 100%; width: 50%; 
float: left; } </style>

Answer №1

The issue lies right here:

<!-- to clear the floats -->

This is an HTML comment, which renders your CSS invalid. Proper CSS comments should look like this:

/* to clear the floats */

This is just one example of incorrect commenting in your CSS; it would be beneficial to correct all instances.

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

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here. My index.html utilizes Bootstrap CDN, as shown below: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

CSS: Creating a dynamic layout to center the card on screens of all sizes

My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...

Customizing Material UI Popover CSS classes within a Select component in a React application

I have integrated the Material UI Select component into my React project. I am attempting to customize the CSS classes .MuiPaper-root and/or .MuiMenu-list. This is how my Select component looks: <Select value={selectValue} disableUnderline onCha ...

Bootstrap 4 Dropdown Menu not displaying on website

Hello everyone, I'm encountering an issue with Bootstrap v4-alpha6 where my dropdown-menu is not appearing as expected. I tried using a sample code from the Bootstrap documentation and it worked fine, but for some reason, my implementation does not e ...

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

I ran into an issue while developing a React web app that I want to work seamlessly across different platforms. My goal was to allow users to interact with a div element by double-clicking on desktop and double-tapping on mobile devices. However, when tes ...

Enhancing Your Website with WordPress Customizer API: Introducing Kirki's Repeater Image Feature

Allow me to clarify this situation as thoroughly as I can. To begin with, I am utilizing a toolkit known as Kirki to enhance the WordPress Customizer API Within my theme, there is a section that features a 4-column layout of services, each accompanied by ...

What is the best way to achieve a 3D tile layout with a zoom effect when hovering over them in a row

Trying to arrange 3D tiles in a row with zoom effect on hover and responsiveness is the ultimate goal. The desired look and feel can be seen below, https://i.sstatic.net/yZVrm.jpg Currently utilizing Bootstrap 3 and WordPress. Seeking guidance on how to ...

Tips for decreasing the width of your HTML or body content using media queries

I am struggling to adjust the width of my desktop view using a media query. My most recent attempt looks like this: @media (min-width: 992px) and (max-width: 1199.98px) { html, body { max-width: 80%; } } However, this code seems to have no ...

The PurgeCSS CLI does not generate CSS files beyond the command line interface

I'm struggling to successfully extract my CSS using purgecss from the command line and save it to a separate file. The instructions on PurgeCSS.com are vague: By default, the CLI only outputs the result in the console. To save the purified CSS files ...

Newbies struggle with styling HTML elements within nested IDs

I am new to learning HTML and struggling with working with IDs and classes within IDs and classes. Based on my understanding, an ID is denoted by a # symbol. So if I wanted to style an ID within another ID, would it be written like: #ID1 #ID2 { ... ...

Ways to incorporate line spacing using CSS

Is there a way to adjust the spacing between the drop down boxes in the sidebar so that they align neatly with the questions in my section? select { font-family: 'Courier New', monospace; color: black; font-weight: bold; font-size: 3 ...

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

Ways to correct the issue of multiple <div>s overlapping each other after being rotated by 90 degrees

Can someone assist me with rotating multiple divs without them overlapping? Below is a simplified version of my code: <div> <div class="rect"></div> <div class="rect"></div> <div class="rect"></div> & ...

There is a significant spacing issue between the header and main category when viewed on a mobile device

Experiencing issues with element distances on different screen sizes? While the website looks fine on normal screens, there's a noticeable gap between the header and main sections on mobile devices. See below for the provided HTML and CSS code. ...

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...