Position a broader div within a slimmer one

Question

Position a broader div within a slimmer one

<div id="narrow">
   <div id="wide">
   </div>
</div>

In my web layout, there is a div with the ID of "narrow" containing another div with the ID of "wide", which has a wider width than its parent.

The div with the ID "narrow" can have a variable width, while the div with the ID "wide" has a fixed width.

I am trying to figure out how to center the "wide" div inside the "narrow" div so that when "narrow" has overflow hidden, both the left and right sides of the "wide" div are trimmed. Any suggestions on how to achieve this?

html css

Answer 1

Answer №1

If you want to center a wide div, one method is to utilize the CSS property position: absolute along with negative margin-left to position it in the center. It's important to note that this technique is most effective when the element has a fixed width.

Check out this JS-Fiddle demo for a visual representation.

#narrow {
    position: relative;
    width: 200px; // could vary
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; // half of the width
    width: 300px; // should be constant
}

To prevent any overflow from the wide div beyond the narrow div, consider using overflow: hidden.

Answer 2

If you want to center a wide div, one method is to utilize the CSS property position: absolute along with negative margin-left to position it in the center. It's important to note that this technique is most effective when the element has a fixed width.

Check out this JS-Fiddle demo for a visual representation.

#narrow {
    position: relative;
    width: 200px; // could vary
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; // half of the width
    width: 300px; // should be constant
}

To prevent any overflow from the wide div beyond the narrow div, consider using overflow: hidden.

Answer 3

Answer №2

Simple CSS solution:

#narrow {overflow: hidden;}

Answer 4

Simple CSS solution:

#narrow {overflow: hidden;}

Position a broader div within a slimmer one

Answer №1

Answer №2

Similar questions

Scrapy spider malfunctioning when trying to crawl the homepage

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

Placing toast notifications on top of dialog modals

What is the best way to incorporate HTML styling into a PHP email tutorial focused on Swift Mail?

The function is defined, but it cannot be set to null

Freeze the headers of multiple tabulators on a single page without restricting the height

The responsive navigation bar yielded an unforeseen outcome

Attempting to transmit a ng-repeat object to a personalized filter function

Personalizing CSS for a large user base

Concealing or revealing an image with jQuery when hovering

Form with missing input fields submits nothing to the server

Using JQuery functions from other JavaScript files is Simple

Spacing between Div tags

The input field does not adhere to the maximum length property

Is there a way to create an animation for changing .text in response to an on click event?

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

What is preventing me from setting the height of a span to 0 pixels?

Tips for effectively managing index positions within a dual ngFor loop in Angular

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the