The layout features two full-width columns, with the first column containing a resizable textarea

I am interested in creating an editor that displays code on the left and its result on the right.

Why is the text inside <div> #right stuck to the white/blue boundary? Why is there no padding? (I would like a 10px padding).

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left; width: 50%; resize: horizontal; }
#right { background-color: blue; }
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column">
Why is this stuck to the white/blue boundary? Why is there no padding? I want a 10px padding!

htmlcss

Answer №1

#right is positioned below the floating textarea, causing your text to be pushed away from the padding when the textarea floats.

To resolve this issue, you can create a block formatting context for the non-floating element by using overflow property.

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left;  width: 50%; resize: horizontal;  }
#right { background-color: blue;overflow:hidden; }
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column">
Why is this sticked to the white/blue boundary ? why no padding? I want a 10 px padding!

Add a transparent background to your code and apply hover overflow to observe its effects:

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; overflow: hidden; }
.column { padding: 10px; overflow: y-scroll; height: calc(100% - 20px); }
#writing { min-width: 1px; max-width: 99%; float: left;  width: 50%; resize: horizontal;background:transparent;  }
#right { background-color: blue;border:solid; }
#right:hover {overflow:hidden;}
<textarea id="writing" class="column">you can drag the width of this column with bottom right corner: resize </textarea>
<div id="right" class="column"><b>HOVER ME</b>
Why is this sticked to the white/blue boundary ? why no padding? I want a 10 px padding!

Answer №2

By making the adjustment

overflow: y-scroll;

to

overflow-y: scroll;

You'll notice that the usage of padding will function correctly.

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

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...

htmlcssbrowsercross-browser

Mobile device causing elements to resize unevenly

On my simple webpage, I have a combination of text and a table. Check out the HTML below: <body> <div id='stat'> <p class='subheading'>Stat of the Week: Average Final Standings</p> <p class='text&apo ...

androidhtmlcssresizehtml-table

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

javascriptphphtmlajaxlaravel

Exploring the possibilities of extracting HTML content from custom tags in Angular JS

I just finished developing a personalized directive. <foo> </foo> Is it possible to retrieve the HTML content enclosed within these tags? Take this example: <foo> <div> .... </div> </foo> My goal is to target and man ...

javascripthtmlangularjs

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

javascripthtml

Initiating the initial element in a list when implementing List with map function in React

Is there a way to automatically trigger the onClick function of the first list item displayed when using the map function in React? I want it to show something, like just logging to the console upon triggering. ... import React, { useState } from "re ...

javascriptcssreactjsbootstrap-4

Enhancing x-axis presentation in D3.js-generated charts

I created a bar chart using D3.js, but I have encountered an issue with one of the values on the x-axis being too long. I attempted to use CSS properties like text-overflow: ellipsis, width: 10px, and overflow: hidden to abbreviate values that exceed a cer ...

javascriptcssd3.js

Styling for the bootstrap dropdown menu is missing

While attempting to incorporate a bootstrap dropdown menu, I noticed that despite applying the appropriate class to the sublist, the formatting and padding that is typically associated with bootstrap are not being retained. My current setup involves using ...

htmltwitter-bootstraptwitter-bootstrap-4

Using source mapping with sass-loader and postcss-loader in a Webpack configuration

I am currently attempting to activate sourceMaps in webpack, but I am encountering an issue with the combination of sass-loader and postcss-loader. When both sass-loader and postcss-loader are enabled, my console displays "no source": https://i.sstatic.n ...

csswebpacksource-mapssass-loaderpostcss-loader

Is the MDL drawer not reaching the full height of the page?

I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill ...

htmlcssruby-on-railsmaterial-design

Is it possible to deactivate or replace flexslider using media queries?

In the process of developing a landing page, I encountered a challenge with displaying testimonials. On the desktop version, the 3 testimonials are arranged in 3 columns. However, for mobile and smaller screens, I needed to showcase them in a slideshow for ...

javascriptjqueryhtmlmedia-queriesflexslider

The scrollBy function is disabled when the user is already scrolling (iOS only)

I am facing an issue with a list of items that gets a new item added to it at regular intervals, resembling a data feed. The list is supposed to update in real-time as new items come in, but if the user scrolls down, it should stay in place to enhance read ...

javascripthtmlios

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

[code page="c#"] Hdnano.Value = Application["AccountNum"].ToString(); $(document).ready(function() { $("#ano").on("blur", function() { var accountNum = $('textarea#ano').val(); $("#Hdnano").val(folioNum); }); &l ...

c#jqueryjsonhtmlbootstrapping

I am trying to connect HTML input with Python but I am not sure how to do it

As part of our capstone course team project, we are developing a self-hosted calendar app specifically designed for college students. One of our team members has taken the initiative to create HTML webpages for this self-hosted server. My current task is t ...

pythonhtml

Video unable to load within the iframe

I have checked the code and it seems correct to me. However, the linked video is not loading properly. var clickHandler3 = function() { var iframe = document.createElement("iframe");  iframe.setAttribute("src","https://www.youtube.com/watch?v=mXnJq ...

javascripthtmliframe

Attempting to trigger the onchange function established by jQuery

Within my code, I have a change listener set on the checkboxes in this section: $(".section").change(function() { if($(this).is(":checked")) { $("." + this.id).show(); ... Now, I am attempting to simulate a click event on the ch ...

javascriptjqueryhtmldom-events

Can you explain the purpose of using "link href="#""?

While browsing through the source code of a website, I came across this interesting snippet. <link href="#" id="colour-scheme" rel="stylesheet"> I'm curious, what exactly does this code snippet do? ...

htmlcss

Add a new to-do list item to the current list using jQuery

Currently, I am in the process of developing a todo list application using jQuery. However, I have encountered some issues and bugs that are causing challenges. Initially, my objective was to set the first element through HTML code, which is functioning as ...

htmljquery

When attempting to click on the dropdown in Bootstrap, there is no content displayed

I am currently practicing Bootstrap and focusing on implementing Dropdowns. However, I am facing an issue where upon clicking the Dropdown button, nothing appears on the screen. Preview when it's not clicked Preview when it's clicked Here is m ...

javascripthtmlcssbootstrap-5