Why does the layout shift occur when setting the width of a block element in percentages or pixels?

I recently created a basic HTML layout;

<div style="float:left;width:100px;background-color:red">RED</div>
<div style="background-color:blue">BLUE</div>

What I noticed is that when the width of the second DIV is not set or is set in percentage, both DIVs appear on the same line. However, if I specify the width in pixels, the second DIV moves to the next line.

I tried searching for an explanation for this behavior but couldn't find any. I tested it on both Chrome and Firefox browsers.

Check out the demo on JSFiddle

csscss-float

Answer №1

Typically, a div is considered a block level element with a full width of 100%.

View jsFiddle demo - Without setting a specific width or using floating, divs will stack on new lines, occupying the full width.

When the first element is floated, it is removed from the normal document flow, altering its behavior as a block level element. Consequently, if the second element does not have a width set, it may overlap the first one.

View jsFiddle demo - The first div has a transparent background to illustrate this concept.

Even if widths are defined for both divs (without floating), they will still behave as block level elements, each on its own line. View jsFiddle demo

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

Adjust the transparency of a distant div element by using CSS checkboxes without any JavaScript

I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and it ...

csscss-selectorspseudo-elementpseudo-classcombinators

The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creatin ...

csstwitter-bootstrapresponsive-designbootstrap-4

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

htmlcss

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties... I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div ...

javascriptcss

What is the best way to expand this HTML5 canvas script to fill the entire screen?

I am having issues adjusting the canvas to fill the entire window. Currently, it is set to 500x500. As a beginner in coding, any assistance would be greatly appreciated! Thank you. Below is the code snippet: <!DOCTYPE html> <html> <head& ...

javascripthtmlcss

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

javascripthtmlcsshighcharts

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss

CSS menu LI with horizontal spacing

I'm currently working on aligning the boxes for each <li> tag next to each other without any spaces in between. However, at the moment, there is a significant gap separating each box. How can I eliminate this space? Here is the HTML code snippe ...

csshtml-listsspacing

Load Jquery hover images before the users' interactions

Currently, I am in the process of creating a map of the United States. When hovering over any specific state, my goal is to replace the image with one of a different color. The issue I am encountering lies in the fact that the image gets replaced and a ne ...

javascripthtmljquerycssjquery-events

What is the most effective method for showcasing HTML content in a recyclerView?

Within the recyclerView, I showcase comments that are stored in HTML format. My attempt to display the comments in a webView was successful, allowing me to use custom *.css, but it caused significant lag in the recyclerView when scrolling. Additionally, m ...

androidhtmlcssandroid-recyclerviewspannable

Creating a unique card component with React and custom Tailwind CSS styling

I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...

cssreactjsnext.jstailwind-css

Tips for effectively overlaying one container on top of another in a responsive manner

There are a pair of containers. The main container functions as the parent, while the child container acts as a tag to categorize the content. The objective is to position the tag container at the top right corner of the main content container, slightly of ...

javascriptcssreactjs

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate lea ...

htmlcsstextcss-animations

Changing the color of placeholder text in MUI 5 TextField

Looking to customize the text color and placeholder text color in my MUI TextField component to be green https://i.sstatic.net/NZmsi.png The documentation doesn't provide clear instructions, so I attempted a solution that didn't work: <TextF ...

javascriptcssreactjsmaterial-ui

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

javascriptjqueryhtmlcsstwitter-bootstrap

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

javascripthtmlcssruby-on-railsruby

From dividing into three sections to splitting into two sections

Struggling to create a list of images and descriptions in sets of threes at larger widths, transitioning to twos at smaller widths? The breakdown is causing chaos. Need help achieving clean one-half columns. Appreciate any assistance! ...

htmlcssimage

Hover without proper anchoring / move to section on click without anchor tag

I need assistance with a jump tab feature I am implementing on my portfolio website. I have encountered a couple of issues that I could use some help with. https://i.sstatic.net/8hwgL.png <ul class="section"> <li><span>home& ...

javascripthtmlcss

How to ensure your content is always visible on Mobile Safari iOS 8 by making sure it stays

Although minimal-ui is no longer supported on iOS8, I've encountered an issue with some fixed content at the bottom of a webpage. The page height is set to 100vh to cover the entire viewport, but some of the content at the bottom is extending below t ...

javascriptjqueryhtmlioscss