Aligning a broad div within a narrower container div

I'm attempting to position a wide div at the center of a smaller one. Is it possible to achieve this layout?

Here is what I have so far:

HTML

<body>
<div id="full_container">
<div id="machine_mask">
<div id="machine_container">
<!---- INSERT CONTENT HERE --->
</div>
</div>
<div class="machine_footer">
<img src="sprites/base_maquina.png" alt="control panel" />
</div>
</div>
</body>

CSS

body {
    margin :0;
}
div#full_container {
    width: 100%;
    height: 100%;
    background: #805080;
}
div#machine_mask {
    margin-top: 30px;
    width: 100%;
    display: inline-block;
    height: 600px;
    background: #805080;
    position: relative;
    overflow: hidden;
}
div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

Currently, the div centers when the window exceeds 1230px in width. However, I require it to be centered even on narrower windows...

Is there a way to achieve this layout? (I considered using jQuery for repositioning, but prefer a CSS solution)

Thank you for your help!

csshtmlpositioncentermasking

Answer №1

A clever approach would be to employ the absolute positioning trick.

div#device_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: absolute;
    left: 50%;
    margin-left: -615px; // half of the total width
    overflow: hidden;
}

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

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

csssass

Avoiding the sudden appearance of unstyled content in Single-File Components

I am looking to update my HTML navigation <div id="header-wrapper"> <div id="header-logo-title"> <nav> <ul id='mainNav'> <li>Home</li> </ul> </nav> ...

javascriptcssvue.jsvuejs2

Is there a way to conceal or eliminate the search form from the webpage in Bootstrap 4 by simply clicking a button?

Is there a way to make the search form and Search Button disappear from the page, as they will be replaced by a Thank you message? <div class="row"> <div class="col"> <!-- ## SEARCH FORM ------------------- ...

javascripthtmlbootstrap-4

Fixed div at the bottom of the page that will stick to the top

Currently, I have a holding page for my website that is functioning as desired. It features some Vegas-style background fades and a simple navigation bar at the bottom fixed to the page with the following CSS: Position: absolute; bottom: 0; You can view ...

javascriptjqueryhtmlcss

Creating uniform height for divs nested within table cells

I need to display data in a table layout, but the design requires separation borders between cells. After exploring different options, I found that using div elements within the td elements was the most effective solution. Example: <table> < ...

htmlcssalignmenthtml-table

Connecting event listeners to offspring elements, the main element, and the entire document

My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...

javascripthtmljquerycssjquery-events

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

cssmedia-queries

Prevent jQuery from scrolling once the fixed image reaches the bottom of the page

I am struggling to figure out how to keep an image fixed at the top of the footer div while scrolling to the bottom of a webpage. My approach involved calculating the height of the footer in order to adjust the scrolling behavior by subtracting it from th ...

javascriptjqueryhtmlcssscroll

Android not recognizing Ionic href links

Lately, I've been tackling a project involving an app that fetches JSON data from a server. Within this JSON data, there's an object containing HTML elements, often with URLs embedded within. Additionally, there's another object consisting o ...

javascripthtmljsonionic-framework

Angular - Uploading Files

Within my $scope.accept function, I am attempting to upload some files to my server. The process works fine when using the tag in my HTML. However, I wish to prevent the page from redirecting and instead handle this with AJAX in my controller. When tryin ...

jqueryhtmlangularjsajaxionic-framework

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

Refresh a JavaScript or division without having to reload the entire page

Is there a way to refresh a JavaScript in a specific div when a button is clicked without refreshing the entire page? It would be ideal if only the div containing the JavaScript could be reloaded. I've experimented with various solutions such as: as ...

javascriptjqueryhtmlajaxreload

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Email confirmation section

I'm in the process of setting up a subscription newsletter page, and everything seems to be working correctly except for the part where I need users to enter their email address twice. The second email field is meant for confirmation purposes, but I&a ...

phphtml

Make sure that when a user clicks on the back button in their web browser, it

Designing a file selection menu where users can choose a file and view it in a text area on a new page, allowing for text editing and saving with a click of a button. Users should be able to return to the file selection menu by simply clicking the browser ...

javascripthtmlasp.net

Place an image at the center with a height set to 100% within a div that has a fixed height and

Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...

javascripthtmlcss

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

javascripthtmlflaskserver-sent-eventseventsource

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

javascripthtmlangularjs

Is there any advantage to placing buttons within an HTML form?

What benefits are there to placing a button within an HTML form as opposed to directly in the body? <form id="viewForm" method="post"> <input id="editBtn" type="button" value="Edit" /> </form> ...

html