Do not include scrollbar measurements when using percentages?

  1. Scenario:
    • Consider the elements parent, child1, and child2
    • child2 has its height and overflow properties set so that its content displays with a vertical scrollbar
    • Both child1 and child2 contain child elements with percentage-based width values

Observation: It seems that in the case where child2 has a vertical scrollbar, the 100% width of child2 does not account for the scrollbar's width. This behavior has been noted on Chrome but a cross-browser solution is preferred.

Summary:

When only one of parent.child1 and parent.child2 has a vertical scrollbar, the computed width of child elements in child1 and child2 differ.

Question: How can I organize parent, child1, child2, and their respective children so that the percentage-based width calculations for child1 and child2 align?

Possible solutions may involve techniques like absolute positioning of background layers, leveraging "modern" HTML5/CSS3 features, and other creative methods.

Thank you in advance!

htmlcsswidthscrollbar

Answer №1

To achieve the desired consistent layout, it seems like you will have to implement a "double bag" strategy with the children. This involves applying percentage widths to the outer layer and using height/overflow properties on the inner layer.

<div id="wrap">
   <div id="child-1" class="outer">
      <div class="inner">
         <!--- Your HTML content here --->
      </div>
    </div>
   <div id="child-2" class="outer">
      <div class="inner">
         <!--- Your HTML content here --->
      </div>
   </div>
</div>

#child-1 { width:60%; }
   #child-1 .inner { height:100px; overflow:auto; }
#child-2 { width:40%; }

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

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

javascriptcssdjangodjango-templateshtmx

Organize the columns and rows of a table using an array in PHP

I am using dompdf to generate my pdf document. Currently, I am facing a scenario where I need to create a table based on two queries from the database. Both of these queries return arrays. The first array contains 28 elements, while the second array cont ...

phphtmlcodeigniter

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

javascriptjqueryhtml

Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom. While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps ...

htmlcssflexbox

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

javascriptjqueryhtmlcss

adjusting dimensions of swf file within html code

I am trying to insert a small speaker icon from the following url: . However, when the flash is loaded, the dimensions of the swf file exceed those specified in the html tag. How can this issue be resolved? <div style="display: inline;float:center;"& ...

htmlcss

Troubleshooting HTML Output Display Issues

I've been trying to post my content exactly as I submit it, but for some reason, it's not working. When I enter two paragraphs in a post, the output doesn't maintain that formatting. Instead, it removes the paragraph breaks and displays the ...

javascriptphpjqueryhtmlcss

Upon clicking a link, the webpage will automatically scroll to a specific point

As I work on creating my website, I have come across a specific need: I currently have a menubar with a dropdown menu. Inside this dropdown, there are 4 different options. These options are all located on the same page. What I would like to achieve is tha ...

htmlwebanchorhref

Creating a Simple HTML Table Using PHP Arrays

I attempted to create a simple PHP array table, but the output of my code did not meet my expectations. <?php $names = array ( 'First Name' => array('Alfre', 'Beka', 'Charlie'), ...

phphtml

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

htmlcssbootstrap-4bootstrap-5

The JavaScript jump function quickly moves back to the top of the webpage

Issue Resolved To prevent the view from jumping to the top of the page, I have implemented three options: Set the href attribute to href="#!" Set the href attribute to href="javascript:;" Pass the object to the event-handler and preve ...

javascriptjqueryhtml

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

Dynamic JavaScript animation to retrieve the position of an element on-the-fly

I am currently exploring the world of animation in JavaScript and I have a few practical questions. In my script, I am attempting to "launch" a "rocket" upon clicking a "button". What I've observed is that although my function calculates values as int ...

javascripthtmlcssanimation

Bootstrap's versatile footer positioning adaptation

I am working with a simple layout design: +----------+ | Header | +----------+ | | | Content | | | +----------+ | Footer | +----------+ My goal is to ensure that the footer is positioned: at the bottom of the viewport when there ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Securely affix two elements on a webpage using HTML, CSS, and Bootstrap

In my webpage, I have split the layout into three sections: left, middle, and right. Using bootstrap, the left and right sections are set to 3 columns each, while the middle section is 6 columns. I want only the middle section to be scrollable, while the o ...

htmlcssbootstrap-4

identifying the :hover state of a link that has a distinct ID

If I were to have the code as follows: .nav > li.dropdown.open.active > a:hover and I needed to target the same style for a link 'a' with the unique id #futurebutton, what would be the correct syntax? Would it not be?: .nav > li.d ...

css

Is it possible to customize the default styling options in Tailwind?

I am currently working on a blog using NextJS, and I have encountered an issue with Tailwind's list style type. It seems that the default styling for list style type is set to list-none, resulting in my <ul> <li> elements not being styled ...

htmlcssnext.jshtml-liststailwind-css

What is the best way to resolve the error message: "__init__() received an unexpected keyword argument 'book_category'"?

I'm currently working on inputting book data and storing it in my database using Django to create a web library. However, I keep encountering the following error: init() got an unexpected keyword argument 'book_category' The issue seems t ...

pythonhtmldjangoweb

What is the best way to position three SVG files in the center of a webpage?

I want to combine three separate SVG files to create one single graphic. The first SVG file is a red triangle, the second is a blue circle inside the triangle, and the third is a purple rectangle beneath the triangle with a little space in between. My obje ...

htmlcss

I am unable to see the text field when I use element.text. What could be the reason for this

As I work on collecting online reviews using Selenium Chrome Webdriver, I've encountered a challenge with TripAdvisor. The reviews are truncated and require clicking a "More" button to view the complete text. Within the html code, there is a class cal ...

pythonhtmlseleniumweb-scraping