Ways to avoid margin overflow in CSS

I am facing an issue with the code below where the last row overflows the parent container. I have tried using overflow: auto; to fix it, but that just adds scrollbars. Any suggestions on how to prevent the overflow?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    #a { height: 33%}
    #b { height: 17%}
    #c { height: 50%}
</style>
<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary m-2">B</div>
  <div id="c" class="row bg-info m-2">C</div>
 </div>

https://codepen.io/anon/pen/PBLyZB

htmlcssbootstrap-4

Answer №1

To achieve the desired shrink effect and fix the spacing issue, convert the container into a flex container. Then, adjust the margin of the middle item to maintain consistent spacing, similar to how margin-collapsing worked before (flexbox disables margin-collapsing).

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container border border-warning d-flex flex-column" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary mx-2">B</div><!-- margin only on the left and right -->
  <div id="c" class="row bg-info m-2">C</div>
</div>

Answer №2

To implement a vertical layout, utilize the display:flex property. Simply include 

display: flex; flex-direction: column;
within the parent element's styling.

Alternatively, leverage the calc function to adjust the margin relative to the height of the elements.

#x { height: calc(25% - 0.5rem) }
#y { height: calc(30% - 0.5rem) }
#z { height: calc(45% - 0.5rem) }

Answer №3

The reason for this issue is the presence of a margin on A, B, and C due to m-2, causing the total height of the three divs to exceed 100% + 4*8px, surpassing the height of the container.

To resolve this, you can adjust the container's height to auto if a fixed height of 400px is not essential (resulting in 432px).

Alternatively,

If maintaining the padding between the divs and the height ratio is critical, removing m-2 and changing the margin to padding: .5rem, while also adding box-sizing: border-box to A, B, C, would be necessary.

Another solution could be to include overflow: hidden in the container to hide the overflow of the last div, though this would make #c { height: 50%} inaccurate.

Answer №4

Include the overflow declaration in the parent element's styles.

.wrapper {
        overflow: auto;
    }

For more information, refer to the official documentation: CSS overflow property

Answer №5

#x { width: 25%}
#y { width: 40%}
#z { width: 35%}
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<div class="container d-flex flex-column p-2 border border-warning " style="height: 400px;">
  <div id="x" class="row bg-primary mx-2">X</div>
  <div id="y" class="row bg-secondary m-2">Y</div>
  <div id="z" class="row bg-info mx-2">Z</div>
</div>

Answer №6

The issue with the alignment of the div boxes within the parent div box is caused by the margin space below each child div. The margin space below each div is set to 8px, resulting in a total margin space of 32px, which accounts for 8% of the total space. To resolve this, you will need to decrease the percentage height of each child div by 8/3px, or approximately 2px from each div and 1px from any 2 of the divs.

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

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...

cssnpmnpm-package

I am looking to transfer an image stored in a database onto a card

One issue I am facing is that when trying to display an image from a database, uploaded by a user and showing on a card with additional information like name and price, an icon resembling a paper with green appears in the output. Here's my code snippe ...

javascriptphphtmlmysqlajax

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

javascriptjqueryhtmlcss

Automated system is responsible for flagging and disabling comments

We are facing a puzzling issue at the moment. Our comments form allows users to submit their thoughts on news articles, and each submission is immediately accepted and displayed on the same page. Within each comment, there is a link that enables users to ...

javascripthtml

Creating Dynamic HTML/DOM in Angular 14: A Guide for Adding New Items to a List

I am currently iterating through a list of items and displaying them within a div element. These items are rendered when the page initially loads. <button (click)="addCut()" mat-raised-button color="primary">Add New Cut</button ...

javascripthtmlangulardom

Enhancing jQuery UI popups with custom styles and layout

Currently, I am working on a web application that relies heavily on jQuery. To create popup windows, I have integrated jQuery UI dialog along with jQuery UI tabs and jScrollPane for customized scroll bars. The overall structure of the application is as fol ...

htmlcssjquery-ui

Enhance VideoJS using custom Ionic icons in a NextJS environment

I'm creating a platform for video content and I want to enhance the VideoJS player by incorporating icons from the Ionic set. However, as I typically use the <ion-icon/> tag to insert icons on my pages, I had to individually specify each icon&ap ...

cssnext.jsvideo.jsionicons

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

Guidelines for showcasing a map on my website with the option for users to select a specific country

Is there a method to showcase a global map on my site and let the user select a country to receive relevant information? I am aware of embedding Google Maps, however, it includes unnecessary controls like zooming which I prefer not to inconvenience the us ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Is it possible to add file content to the beginning rather than the end?

Looking for help with my form that allows staff to submit messages to our updates page. I currently have this code: $filename = "files/armaupdates"; $text = $_POST['update']; $updatesep = "<hr><br><hr><br>"; $fp = fopen ...

phphtml

Is it necessary for me to develop a component to display my Navigation Menu?

After designing a Navigation menu component for desktop mode, I also created a separate side drawer component to handle variations in screen size. However, a friend of mine advised that a side drawer menu component may not be necessary. According to them ...

javascripthtmlreactjs

to invoke a jQuery function located on a different webpage

Imagine you have two web pages: hello.html and wow.html. hello.html contains the following script: <script> $(document).ready(function() { $( "#loader" ).load( "wow.html"); }); </script> while wow.html includes this jQuery function: $(fun ...

jqueryhtmlajax

Change the JavaScript code to output HTML rather than just plain text

I've created a small plugin for tinymce4 that adds an additional dropdown menu with a list of headers (e.g. h1, h2...). The issue I'm facing is that I'm trying to display these header elements with their corresponding styles (e.g. <h1> ...

javascriptjqueryhtmlcsstinymce

Different approach to handling overflow without using the hidden property in CSS

Having trouble with my CSS layout I've created a form within a fixed 500 pixel width div that is centered on the page using margin auto; To create a table-like structure within the div, I used div elements as rows. Due to varying heights of these ro ...

htmlcss

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

Prevent the Stop Button from triggering submission and then utilize JavaScript to submit the form

I have a global delete button utilized in various sections of my site. Below is the code snippet for reference. public function delete_button($id_to_be_deleted, $form_to_post_to, $button_name){ return form_open($form_to_post_to, array('class&apos ...

javascriptphpjqueryhtmlforms

Using jQuery to smoothly transition the page: first fade out the current content, then switch the background

I'm currently facing an issue with trying to create a step-by-step operation that involves fading the container div around a target div, changing the background, and then fading it back in. The problem is that all the functions in this block are being ...

javascriptjqueryhtmlcss

I am looking for a way to showcase the form value either in the address bar or transfer it to another page using JavaScript. Can

Currently facing a challenge with a form where I need to input the name and email, redirect these values to another page, and display them in the address bar using only JavaScript. Take a look at the form here: View Form Code snippet for the form: <f ...

javascriptjqueryhtml

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

javascriptjqueryhtmlcsstwitter-bootstrap

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

htmlcss