There is a collision of boxes occurring within the CSS

Help Needed: Overlapping Boxes in Responsive Design

I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I have tried various solutions but cannot seem to fix it. The specific boxes that are overlapping are content-box1 and content-left.
    
Code:</p>

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    font-size:12px;
    background: #394BA0;
    color:#C180E4;
    border-color:#88C6ED;
}
#wrapper {
    width:62.7%;
    margin:0px auto;
    border:1px solid #bbb;
    padding:10px;
    height: 1199px;
    position: abosulte;
}
#header{
    border:1px solid #bbb;
    height:100px;
    padding:10px;
}
#content-left {
    width: 20%;
    height: 30%;
    border:1px solid #bbb;
    margin-top: 15%;
    position: absolute;
}
#content-main {
    position: absolute;
}
#content-box1 {
    width: 20%;
    height: 26%;
    border:1px solid #bbb;
    margin-top: 1%;
    position: absolute;
}
#content-box2 {
    width: 20%;
    height: 26%;
    border: 1px solid #bbb;
    margin-top: 1%;
    margin-left:21%;
    position: absolute;
}
#content-box3 {
    width: 20%;
    height: 26%;
    border: 1px solid #bbb;
    margin-top: 1%;
    margin-left:42%;
    position: absolute;
}
#bottom {
    width: 27%;
    height: 27%;
    border: 1px solid #bbb;
    position: absoulte;
    margin-top: 100%;
}

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

I require an HTML <select multiple> element that includes a disabled option

Can anyone help me figure out how to create a multi-select box with a disabled element? I want the box to have the following options: All ----or---- option 1 option 2 I don't want the "----or----" option to be selectable. Here's the code I&a ...

jQuery function duplicates row in table

I am trying to utilize jQuery to generate a table, but I seem to be encountering an issue with my code: function showGrid(url, container, columns, page) { jQuery(container).empty(); var tr = jQuery("<tr class=\"mobileGridHeader\"> ...

Bootstrap overrides the color of the calendar year in jQuery UI

I am facing an issue where the CSS styles of my jQuery UI calendar are being overridden by the Bootstrap CSS styles. Take a look at the screenshot provided. As you can see, the text color of the calendar's year is not black as intended. https://i.ss ...

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

What is the best way to design an HTML table that features alternating colors for each row and column?

I recently came across this image showcasing a beautifully designed table: https://i.stack.imgur.com/6K63q.png The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixe ...

Show or hide a div based on the visibility of another div in Angular using *ngIf

Looking for a way to dynamically display images based on the visibility of another image? Consider the code snippet below: <div *ngFor="let badge of user.progress.unlockedBadges"> <img id="{{i}}_unlockedImage" *ngIf="badge == achievemen ...

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

PHP script redirects to its own URL successfully, but the functionality fails when triggered by CRON

I am facing an issue with a program that calls itself iteratively. redirect($_SERVER["PHP_SELF"]); function redirect($url,$seconds=0) { $html="<html><head><meta http-equiv='refresh' content='$seconds; URL=$url'>< ...

Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...

Bootstrap: Problem arises when columns do not total up to 12 and are pushed onto separate rows

So, I've been working with Bootstrap to structure columns and rows. It seems like I have the container, rows, and columns set up correctly for each post. However, I am puzzled as to why a new row is created for every post I make, causing them to stack ...

Vue component updating its model only upon input element losing focus

I'm a beginner with vue and I'm currently working on incorporating an ajax search feature that triggers when a keyup event occurs. I have noticed that the model only updates when the input element loses focus. Sample HTML Code: <input name=" ...

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

Embed JavaScript code in the head section of the webpage to guarantee its presence even following a page refresh

We recently obtained an innovative Enterprise Talent Management Solution that is cloud-based. One standout feature allows users to incorporate HTML Widgets with scripts on the primary Welcome Page. The customization options for the Welcome Page UI are qui ...

Running nodejs scripts within my HTML and JavaScript code

Using express, I send an HTML file to incoming GET requests: app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); Within that HTML file, I included another JavaScript file, script.js, us ...

Maximizing AngularJs performance on handheld devices

Recently, I developed an HTML page using material angularjs that functions perfectly on desktops with various browser sizes. However, the issue arises when opening the same page on a mobile device as it behaves like a desktop application instead of adjust ...

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

Is it possible to conceal or disregard text elements from the web browser search function by using CTRL+F?

I have a complex web application interface with a dedicated area for content display. Is there a way to ensure that when users utilize the browser's text search function (CTRL+F), the UI elements are ignored and only the actual content is searched? ...

Different strategies for displaying a singular pie chart on multiple pages

I have implemented a pie chart on an HTML page and now I want to display this chart on multiple other HTML pages. Below is the JavaScript code for creating the pie chart: function piechart() { var chart; var legend; ...

Issues with IE7 related to Jquery and potentially HTML as well

I am currently working on a website project for a local charity organization, and I am encountering technical issues with compatibility in IE7. The website functions perfectly in all other browsers I have tested, and it even passes the validation process o ...