When div a is nested within div b, the background color of div a will not impact any other elements within div b

Check out this snippet of HTML code:

    <div class="col-2">
            <div class="leftcol ">
                <h3>When you see a puzzle</h3>
                <div class="image">
                    <img alt="img" src="images/sreak1.jpg" width=75% height=75%>
                        <h3>It scares me </h3>
                </div>
                <div class="image">
                    <img alt="img" src="images/panda1.jpg" width=75% height=75%>
                    <h3>I have to solve it</h3>
                </div>  
                <div class="image">
                    <img alt="img" src="images/sreak2.jpg" width=75% height=75%>
                    <h3>I consult with my friends</h3>
                </div>   
            </div>
        </div>

I've noticed that when I apply a background to "leftcol", there is an area in the "col-2" where the background does not cover (it seems like "col-2" is larger than "leftcol", and there is still space under "leftcol" within "col-2" that is not part of "leftcol"). How can I fix this issue? Here's my CSS code:

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;


}
.leftcol{
background-color:rgb(260,60,30);
}
.col-2{
width:16.66%;
}

Answer №1

In my opinion, adding a bit of margin or padding might help. Give this a shot.

.col-2{
  padding:0;
}
.leftcol{
      margin:0;
      height:100%;
      width:100%
 }

Answer №2

Make sure to add this snippet of code at the beginning of your CSS file.

*{
   padding:0px;
   margin:0px;
 }

Every web browser has its own default values for padding and margins. By including this code, you can reset those defaults and ensure a consistent display across all browsers.

Answer №3

I am looking to establish

 <div class="col-2 leftcol ">...
</div>

all within a single div.

Appreciate your assistance :)

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

Why is the value returned by getBoundingClientRect 190 when the y attribute is set to 200 in SVG?

When placing textBox1 at a y-position of 200, getBoundingClientRect is returning a value of 190. What could be causing this discrepancy? For more details and code snippets, please refer to the following link: https://codepen.io/anon/pen/REKayR?editors=101 ...

What is the best way for a background-image to determine its height in CSS?

I am currently working on a website project and I would like to include my title using a background-image because it uses a unique font. In my design class, we were taught that this is the best approach. However, I am struggling with setting the correct di ...

jekyll - experiencing issues with CSS styling functionality

Recently, I've started exploring Jekyll as a tool for web development. I came across this theme called DentistSmile and decided to give it a try. However, when I run jekyll build, the _site directory is created but the CSS styles don't seem to ...

get the value of the last selected element using jQuery

I am facing an issue where I cannot retrieve the selected value from my second select element. Even though I have selected the second option in the dropdown, it keeps returning the value of the first option as empty. Here is a snippet of the HTML code: & ...

Design your website with CSS by incorporating hanging ::before labels that feature unique formatting

I am looking to create labels that designate specific groups of words. Here are the criteria: The label should appear to the left of the word group The words should be enclosed in lines, while the label should not The words should be indented, while the ...

Font on the internet that does not have the specific Germanic di

Just recently I purchased a new font and was excited to use it on my website using web fonts. However, upon closer inspection, I noticed that the umlauts such as ä, ü, and ö were missing from the font, leaving empty spaces where those characters should ...

The background surpasses the size of the iframe

I am currently designing a Joomla website and have created a custom module that displays an 800x500 image. Additionally, I have another module with an iframe displaying video content from livestream.com. I am wondering if it is possible to use the larger ...

Tips for creating a phone number placeholder that stays in place on a form

I'm looking to display the phone number format as a placeholder in the input field, without it disappearing as the user types. The standard HTML placeholder disappears as the user starts typing. I want the placeholder to remain visible and guide the ...

Sophisticated method for displaying href depending on a condition

I need to display an <a> tag. Based on whether a value exists or not, I have to adjust the href. This is my current code snippet: <a ng-show="source.element!=0" "href="#/resource/{{source.a}}/{{source.b}}/val"> {{source.element}}) </a ...

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

Enlarge Django thumbnail when hovering over it in Django admin console

Looking to incorporate a CSS hover effect into this Django admin function that shows a thumbnail in the admin area. The goal is to enlarge the image when hovered over. def image_tag(self): if self.image: return mark_safe('<img ...

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

Retrieve the child element index of a specific element using jQuery

I am dealing with a group of 'DIV' elements, each containing a list of 'p' elements. Take a look at the example below: <div class="container"> <p>This is content 1</p> <p>This is content 2</p> ...

Mobile-friendly HTML email design featuring bottom navigation bar

Currently, I am in the process of coding a responsive email template. Here is what I have so far: Click here to view <tr class="main_nav"> <td id="mobile_nav" width="600"> <table cellpadding="0" cellspacing="0" width="100%"> ...

Structuring PHP, HTML, and jQuery files on a website

I'm a beginner in web development and currently working on a school project to create a basic educational video platform. My next task involves turning my site into a single page application, which I plan to accomplish with the help of jQuery and AJAX ...

Adapt the dimensions of the iframe to perfectly match the content within

Looking for a way to dynamically adjust the size of an iframe to perfectly fit its content, even after the initial load. It seems like I'll need some kind of event handling to automatically adjust the dimensions based on changes in the content within ...

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

Calling ASPX method remotely and receiving undefined data

I'm still fairly new to ASP.NET and web services. I've encountered an issue where I am calling a web service from a *.aspx page, and the web service is returning the correct output. However, when I call the *.aspx method from an external HTML pag ...

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

How to adjust the width of nested divs in Nuxt.js/Vue.js to align with a specific container in the stack

Is there a way to handle varying image widths in Nuxt without compromising the layout? I have an image component that needs to adjust for different screen sizes, and I want the title and description to always match the width of the image. Here's what ...