What could be causing the misalignment of these two divs?

I'm struggling to horizontally align these two divs using percentages for width. Even with padding and margin set to 0, they refuse to line up properly (the second one ends up below the first).

This is the code I have been using:

<div style="width: 100%; height: 75%; background-color: red; position: absolute; top: 0;">
  <div style="width: 60%; height: 100%; background-image: url(https://via.placeholder.com/350x150); overflow: hidden; padding: 0; margin: 0; "></div>
  <div style="width: 40%; height: 100%; background-color: #202020; float: right; display: inline-block; overflow: hidden; padding: 0; margin: 0;"></div>
</div>

If anyone can offer guidance on how to resolve this issue, it would be greatly appreciated. Thank you!

htmlcssalignment

Answer №1

apply the float property to the first inner div

 <div style="width: 100%; height: 75%; background-color: red; position: absolute; top: 0;">

    <div
        style="width: 60%; height: 100%; background-image: url(b.png); overflow: hidden; float:left; padding: 0; margin: 0; ">
    </div>

    <div
        style="width: 40%; height: 100%; background-color: #202020; float:right; overflow: hidden; padding: 0; margin: 0;">
    </div>
</div>

https://jsfiddle.net/lalji1051/r531j2dv/2/

Answer №2

Implementing display: inline-block; on the initial div will suffice (this also applies to the subsequent div, eliminating the need for a float). The absolute positioning of the wrapper div is redundant, and both html and body must have a defined height property to allow percentage height for the wrapper div and its child elements:

html, body {
margin: 0;
height: 100%;
}
<div style = "width: 100%; height: 75%; background-color: red;">
            <div style = "display: inline-block; width: 60%; height: 100%; background-image: url(b.png); overflow: hidden; padding: 0; margin: 0; "></div>
            <div style = "width: 40%; height: 100%; background-color: #202020; float: right; display: inline-block; overflow: hidden; padding: 0; margin: 0;"></div>
        </div>

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

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

Instructions on implementing getJSON in this code

I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...

javascriptjqueryhtmljsongetjson

Issues with the CSS in our unique eBay template are creating some challenges

Our team is currently in the process of creating a customized template for our eBay listings. eBay provides users with the option to upload a description as HTML code and allows the code to link external CSS files. When uploading HTML code on eBay, it ap ...

htmlcsstemplates

Adding flair to the encompassing container

Below is the HTML code that I am working with: <div class="um-field field-date"> <p class="form-row " id="date_field"> <label class="date"> <input data-label="Date" data-value="" type="date" class="input-date um-frontend-f ...

javascripthtmlcss

Grid Property Equivalent to Flex-Grow

I stumbled upon a bug in the way Chrome version 75 handles flexbox. Therefore, I am curious to explore if the issue persists with grid, but for my test to be accurate, I need a grid property that functions similarly to flex-grow considering the current str ...

csscss-grid

Establish restrictions for the minimum and maximum values for each year in the Date Range Picker

After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...

phpjqueryhtmldaterangepicker

Error: Trying to access 'items' property of an undefined variable leads to a TypeError

I am currently working on creating a webpage with Angular 8 that fetches data from a REST API in JSON format by passing the request ID. My goal is to display this data in an HTML table that I have created. However, I encountered the following error: Typ ...

htmlangulartypescript

Using jQuery to Validate Input Text Control Depending on Radio Selection

How can I ensure that the input text linked to the selected radio option is filled in? For instance, in the example above: If Contact 1's Email radio option is chosen, the Email text field for Contact 1 must not be empty, while the Phone and US Mai ...

javascriptjqueryhtml

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

Align an image in the center of a div without using absolute positioning

I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing ...

htmlcssimage

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

I am facing an issue with escaping HTML in my Extjs grid. I have used the following configuration : return Ext.String.htmlEncode(value); In the renderer of my column, this method works perfectly for simple HTML tags like h1, b, i, etc. However, if I in ...

javascriptjqueryhtmlextjs

What causes the behavior of <body> backgrounds to differ from that of other HTML elements?

After examining the HTML code provided: <p style="margin:100px;border:1px solid red;background-color:#dff"> Hello </p> We can observe that when rendered by the browser, it looks like this: https://i.sstatic.net/rADHC.png If we were to mod ...

htmlcssmargin

Challenges with altering the height of a div through animation

HTML <div class="blok1" ></div> <div class="blok2"></div> <div class="blok3"></div> CSS .blok1 { background-color: green; border-bottom-left-radius:15px; border-bottom-right-radius:15px; h ...

jqueryhtmlcss

Decorative initials have a tendency to create spaces within the text

I have incorporated Google Fonts into my website, along with Bootstrap. Here is the code I am using: .initial { font-size: 1.5em; font-family: 'Euphoria Script', cursive; } p { font-family: 'Open Sans', sans-serif; } <html> ...

htmlcss

tips on customizing buttons within form groups

I have set up two separate form-groups: My goal is to click on each button within each group and toggle its style from grey to green, and vice versa. However, when I click on a button, all buttons within the group turn grey except for the one that was cli ...

javascriptjquerycssbootstrap-4

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

I'm currently working on a Laravel website where I have a pricing table sourced from a database. The Retail Price column in this table serves as the base for calculating and populating a Discount Price column using a multiplier specified in a text inp ...

javascripthtmljquerylaravel

Having trouble getting transitionProperty to work in the style object of your ReactJS CSS?

In my current setup, I have been utilizing css transitions triggered by property updates to manage animations within my react components and everything has been functioning smoothly up until now. However, I am encountering an issue where I only want to tr ...

cssreactjsjsx

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

javascripthtmlangularjs

Extracting data from a tiered website within a specialized niche

I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...

pythonhtmlselenium-webdriverweb-scraping

Occupying the entire width of a screen

Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...

csshtmlwidth