Why does pressing "enter" create a line break in HTML when typing?

Apologies in advance for what may seem like a simple CSS issue that I couldn't find an answer to on Stackoverflow. Here's the JSfiddle link: https://jsfiddle.net/kwende/fqxna79a/

In the code, you'll see two div tags:

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

The strange thing is that when you press ENTER between the divs in Chrome and Edge, the green and red blocks no longer align horizontally, despite no changes in CSS or markup. It's puzzling why a line break within the text document affects the rendering of the markup.

For reference:

https://i.stack.imgur.com/0E0tc.png

shows no line breaks, while

https://i.stack.imgur.com/Fj7oa.png

Update: The question seems to have been answered previously. Check out this informative resource: Here

csshtml

Answer №1

The issue doesn't lie in the actual newline itself, but rather in any whitespace that is inserted between the two div elements.

By setting them to display as inline-block, they take on characteristics of inline elements, meaning they will sit side by side if there is no space separating them.

However, as soon as white space is introduced between them, the layout system calculates that adding 20% + white space + 80% exceeds 100%, prompting the second div to move to a new line.

This behavior can be confirmed by adjusting the width of the second div to 79% while maintaining the space or newline. In this scenario, the div elements will continue to align next to each other.

Answer №2

An alternative solution to using 79% is setting the font-size of the top element to 0. Here's an example of how that can be done: https://jsfiddle.net/fqxna79a/2/

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}

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

Embed a div opening tag within a jQuery function for one element, and then add a closing div tag after another element

Struggling with examples from the jquery documentation, I find it difficult to add a div before a specific list item and then close it after another using different classes for each li element. The prependTo and append functions don't seem to work as ...

htmljquery

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

Select the date that is three months from now using the datetimepicker feature of Bootstrap

I have two datetimepicker fields for selecting a start date and end date. I am utilizing the eonasdan datetimepicker plugin for Bootstrap. I am trying to set the range from the current date up to 3 months ahead. However, when I use maxdate:'+90d&apo ...

phphtmltwitter-bootstrapdatetimepicker

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

javascriptjqueryhtmlcss

The parent container is not properly wrapping its content in Internet Explorer only

Check out this code snippet I have here: https://jsfiddle.net/kimwild/mtxgtwr5/2/ main#wrapper { z-index: 1; width: 100%; position: relative; overflow: hidden; background-color: red !important; border: 10px dotted #4D37DB; } figure#about-im ...

csshtmlinternet-explorerinternet-explorer-11

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to set a newly selected HTML option as the first choice?

I'm facing a simple problem in JavaScript that I can't seem to crack. Admittedly, I am new to working with JavaScript. My issue lies with sorting a dropdown list in alphabetical order while also keeping the selected value at the top. Whenever a ...

javascriptjqueryhtmltwig

Balancing heights with jQuery

Is there a way to set the height of an h3 element based on the tallest version of its siblings, but only for certain elements? I have a list where CSS organizes items into rows of 3. The last li element in each row has the class "endRow". I want to find t ...

jquerycssheight

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Currently, I am working on creating an SVG that includes an image from an external URL: https://i.stack.imgur.com/4iGwt.jpg: <svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns= ...

htmlimagesvgcontent-security-policy

Modifying a string in PHP before inserting it into a database

I am looking to save a method for performing a specific task in a database field. However, I want to store this method as a string including HTML tags. For instance, the following list should be included: <ul> <li>List item</li> <li&g ...

phphtml

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

javascriptjqueryhtmlcss

Creating a JSON array using looping technique

I am attempting to construct a JSON array using a loop where the input className and value will serve as the JSON obj and key. However, I am facing difficulties in creating one and cannot seem to locate any resources on how to do so. Below is an example sn ...

javascripthtmlarraysjsonobject

Online platform generating printed code

Have you checked out the website here? I'm facing a problem on that site and can't figure out why. I've installed PDO, PHP, httpd, php-mysql, but still unable to resolve the issue. I've even tried reinstalling everything and following ...

phphtmlmysqlapachepdo

What is the best way to extend an image to fill the width of a webpage?

Can you advise me on how to expand the image to fit the width of my webpage? If possible, could you take a look at this website: Poklanjam The specific image I am referring to is the one of the city on the left-hand side. What additional CSS code should ...

csswordpress

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

The table's content extends beyond the confines of the page

I have an HTML page where I am embedding an SSRS report. The report extends beyond the page as shown in the image below: This is the table that is generated: <table cellpadding="0" cellspacing="0" id="ctl00_MainContent_FiveYearReportViewer_fixedTable" ...

javascripthtmlcss

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation