Mixing CSS layers

Applying this particular css:

.addProblemClass{
    width:300px;
    height:300px;
    /*width:25%;
    height:40%;*/
    border:solid 1px #000000;
    margin: 5px;
    background-color:#FFFFFF;
    padding:5px;
    opacity:0.9;/*For chrome and mozilla*/
    filter:alpha(opacity=90);/*For IE*/
}

.boxHeader{
    border: solid 1px #000000;
    height: 20%;
    padding: 5px;
}

.addProblemHeaderTextDiv{
    border:solid 1px #FF0000;
    width: 80%;
    height: 100%;
}

.addProblemHeaderImageDiv{
    border:solid 1px #00FF00;
    float: left;
    width: 20%;
    height: 100%;
}

Along with this html snippet:

<div class="addProblemClass">
            <div class="boxHeader">
                <div class="addProblemHeaderImageDiv"></div>//DIV A
                <div class="addProblemHeaderTextDiv"></div>//DIV B
            </div>
        </div>

The issue arises where DIV A and DIV B appear to be overlapping. Any insights on why this might be happening?

csshtmloverlap

Answer №1

Utilize 

float: left;

for the addProblemHeaderTextDiv class

.addProblemHeaderTextDiv{
    border:solid 1px #FF0000;
    width: 80%;
    float: left;
    height: 100%;
}

Modify

What is causing it to appear in two rows?

When you set the widths as 20% and 80%, they will occupy the entire available space. Additionally, with the border added, it exceeds the 100% width causing it to spill over. To resolve this issue, adjust the width of either div or remove the borders.

Answer №2

It seems that the CSS Box model is causing some difficulties in achieving the desired layout, particularly due to the 1px border it adds.

When trying to allocate space using percentages, the 1px border can throw off calculations:
20% + 80% = 100% width + 1px border

One workaround could involve adjusting the margin to compensate for the border. Otherwise, you might need to consider adding additional markup to meet your layout requirements.

.addProblemHeaderTextDiv{
    border:solid 1px #FF0000;
    width: 80%;
    margin: 0 -1px;
    height: 100%;
    float: left;

}

.addProblemHeaderImageDiv{
    border:solid 1px #00FF00;
    margin: 0 -1px;
    float: left;
    width: 20%;
    height: 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

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

htmlcssreactjs

Styling the Sidebar with a Tucked-In Header Ribbon in CSS

There are numerous methods to achieve this desired effect: I initially used a table to achieve this, but I have now chosen against using tables for that purpose. What is the most effective way to accomplish this while maintaining a right border? ...

htmlcss

How can I make a dropdown menu appear when I select a checkbox?

Is it possible to have a dropdown menu with changing options appear when I click on a checkbox using HTML and JavaScript? I have experimented with some code snippets in JavaScript as a beginner, but I am unsure if they are needed here. Is there an altern ...

javascriptphphtml

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

Is it possible to retrieve the height of an element using AngularJS and assign it to another div's attribute? In my Bootstrap website, I have a fixed sidebar that needs to stop before reaching the footer. To achieve this, I currently have to manually ...

javascripthtmlangularjs

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to eliminate a style from the final element of a list?

I have just completed a project that looks similar to this: I am wondering if there is a way to remove the line at the end of the last column? (it's within a PHP while loop) Here is the code snippet: <div style="border-bottom: 1px solid #cdc ...

cssheight

The CSS and JavaScript in pure form are not functioning properly upon deployment in Django

In my Django project, I am utilizing pure CSS and Bootstrap. Everything appears as expected when I test it on my local machine. However, once deployed, the appearance changes. The font looks different from how it did before deployment: After deploying to ...

javascripthtmlcssdjangoyui-pure-css

Top tip for combating form misuse in Django applications

Is there a reliable method to restrict form submissions in Django? I need the form to be submitted a maximum of 5 times from the same IP address within one hour. Can this restriction be implemented in Django? I experimented with Django Ratelimit, but unfo ...

pythonhtmldjangoforms

The background image causes the scrollbar to vanish

As a beginner, I am in the process of creating a web page that features a consistent background image. However, I have encountered an issue where the scroll bar does not appear on a specific page called "family details" due to the background image. I atte ...

javascripthtmlcssangular

Is it considered improper to include non-input HTML elements within a form tag in Angular reactive forms?

When working with an angular reactive form to manage html inputs, is it acceptable to include non-input html elements within the form tags? NOTE: The previous example has been removed. A new one will be provided soon. ...

htmlangular

After closing a window in GXT, the Element will be removed using RootPanel's get(String id) method

I am working on a GWT project with the GXT framework, and I have an embed tag in my project.html as shown below: <embed type="application/nptta" width=100% height=100% id="testId"></embed> There is a formPanel that will use RootPanel.get("tes ...

htmldomgwtgetelementbyidgxt

"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...

htmlcssmobileflexboxresponsive

Implementing a click function that toggles between adding and removing a class, keeping track of the number of clicks, and utilizing localStorage to prevent repeated clicking in the

Hi there! I'm currently working on a simple widget that features a clickable icon and a counter next to it. When the icon is clicked, it should toggle between an empty heart and a filled heart using addClass/removeClass. Additionally, each click incr ...

javascriptjqueryhtmllocal-storageaddclass

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

As someone working in the analytics field, I often rely on CSS selectors to address various issues. Currently, I am faced with a task on a website where I need to determine whether a <p> element is hidden or visible. There are two possible scenarios: ...

javascripthtml

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

javascriptphpjqueryhtmldatepicker

Preventing context menu from appearing on a right click by implementing a trigger to re-enable it

I am looking to implement a functionality on my website that disables the right click menu. Currently, I have achieved this through the following code: document.addEventListener("contextmenu", function(e){e.preventDefault(); }, false); Now, I am wonderin ...

javascripthtmlright-click

Manipulating a cloned object using jQuery

var clonedForm = $('form').clone(); //clonedForm.find('input[type="hidden"]').remove(); clonedForm.find('select').each(function(){ $($(this).val()).insertAfter($(this)); $(this).remove(); }); Atte ...

jqueryhtmldom

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

javascripthtmlcssautomated-testsnightwatch.js