In the context of resizing elements within a scrolled div, CSS divs with margin auto may not always be perfectly centered

Question

In the context of resizing elements within a scrolled div, CSS divs with margin auto may not always be perfectly centered

I am encountering an issue with centering divs within another div with overflow:auto; initially, all divs are centered using margin: 0 auto; however, when I use jQuery to resize the last div, a scrollbar appears (as expected) but the other divs remain in their original positions. I want all the divs to automatically realign themselves at the center of the scrolled div.

Here is how I resize the last div:

$('#boton').click(function(){
    $('.div2').css({width:'400px'});
});

You can see it in action in this fiddle, just press the "resize" button:

http://jsfiddle.net/odabart/cAyVF/1/

EDIT:

Since I do not know which divs will be resized in advance, I am looking for a solution that uses only CSS for automation purposes; jQuery is used here solely for demonstration.

jquery html css

Answer 1

Answer №1

To effectively enhance the layout, it is necessary to introduce a wrapping div around all instances of div1 and div2, adjusting the dimensions of this wrapper accordingly. The revised HTML structure will appear as follows:

<div style='overflow:auto;width:200px;height:300px'>
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

Add the following line in the JavaScript section to handle resizing when the button is clicked:

$('#boton').click(function(){
    $('.div2, .wrapper').css({width:'400px'});
});

Sincerely,

Answer 2

To effectively enhance the layout, it is necessary to introduce a wrapping div around all instances of div1 and div2, adjusting the dimensions of this wrapper accordingly. The revised HTML structure will appear as follows:

<div style='overflow:auto;width:200px;height:300px'>
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

Add the following line in the JavaScript section to handle resizing when the button is clicked:

$('#boton').click(function(){
    $('.div2, .wrapper').css({width:'400px'});
});

Sincerely,

Answer 3

Answer №2

All of the yellow div elements are currently being centered within a parent element with a width of 200px. To center all the divs, an additional div needs to be added and resized using jQuery.

Check out the demonstration here: http://example.com/demo

HTML:

<div style='overflow:auto;width:200px;height:300px'>
    <div class="inner">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='btnClick' value="resize"/>

jQuery:

$('#btnClick').click(function(){
    $('.div2').css({width:'400px'}).parent().css({width:'400px'});
});

Answer 4

All of the yellow div elements are currently being centered within a parent element with a width of 200px. To center all the divs, an additional div needs to be added and resized using jQuery.

Check out the demonstration here: http://example.com/demo

HTML:

<div style='overflow:auto;width:200px;height:300px'>
    <div class="inner">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='btnClick' value="resize"/>

jQuery:

$('#btnClick').click(function(){
    $('.div2').css({width:'400px'}).parent().css({width:'400px'});
});

Answer 5

Answer №3

If you're looking to automatically center the yellow divs in relation to the blue div, one approach is to use jQuery to adjust the width of the containing div and have the blue div expand accordingly.

UPDATED AS PER SPECIFICATIONS

View Updated JSFiddle example

jQuery

$('#boton').click(function(){
    $('.wrapper').css({width:'400px'});
});

HTML

<div class="frame">
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

CSS

.frame {
    overflow: auto;
    height: 300px;
    width: 200px;
}

.wrapper { width: 200px; }

.div1{
    width:100px;
    height:50px;
    background-color:yellow;
    margin: 0 auto;
    border:1px solid black;
    display:block;
}

.div2{
    width:100%;
    height:50px;
    background-color:blue;
    margin: auto;
    left: 0;
    position: relative;
    right: 0;
}

Answer 6

If you're looking to automatically center the yellow divs in relation to the blue div, one approach is to use jQuery to adjust the width of the containing div and have the blue div expand accordingly.

UPDATED AS PER SPECIFICATIONS

View Updated JSFiddle example

jQuery

$('#boton').click(function(){
    $('.wrapper').css({width:'400px'});
});

HTML

<div class="frame">
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

CSS

.frame {
    overflow: auto;
    height: 300px;
    width: 200px;
}

.wrapper { width: 200px; }

.div1{
    width:100px;
    height:50px;
    background-color:yellow;
    margin: 0 auto;
    border:1px solid black;
    display:block;
}

.div2{
    width:100%;
    height:50px;
    background-color:blue;
    margin: auto;
    left: 0;
    position: relative;
    right: 0;
}

In the context of resizing elements within a scrolled div, CSS divs with margin auto may not always be perfectly centered

Answer №1

Answer №2

Answer №3

Similar questions

Placement of the Zend submit button

How can multiple buttons be added to each row in Jquery datatables and how can events be applied to them?

Steps to launching a URL in a new window on Internet Explorer

Retrieve the browser version of a client using C# (When Internet Explorer Compatibility mode is activated)

Is it possible to apply an onclick event to list items using Ajax and jQuery?

What is the best way to find elements in a jquery array that match any part of the text within a div?

What could be causing the malfunction of the Carousel Slide feature in my code?

What is the best way to link an anchor tag to a specific tab's content section

There seems to be a lack of information appearing on the table

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Form alignment issue: Bootstrap justify-content feature not functioning as expected

Expanding the size of your Bootstrap 3 input box

Can a webpage be redirected to another page while passing along the id from the original page?

An error occurred with the authorization headers when attempting to retrieve the requested JSON

Animating content through CSS and jQuery to reveal its unfolding effect

Guidelines for sending a personalized email through the WordPress admin dashboard

What is the best way to send an image object in a Django HTTP response?

Submitting an HTML form to a PHP file for processing before returning to the original HTML page for further interaction

CSS border-image negative positioning (no HTML required)