You can create a div with a variable width and center it within a parent container, even if the div's width is larger

Trying to articulate what I require.

There are five Divs: a wrapper, div 1, div 2, div 3, and div 4.

HTML:

<div id="main">
    <div id="one">1</div>
    <div id="two">2
        <div id="four">4</div>
    </div>
    <div id="three">3</div>
</div>

CSS:

#main{
    height:200px;
    border: 1px solid red;
    float:left;
}

#one{
    min-width:100px;
    max-width:200px;
    background-color:#cccccc;
    height:100%;
    float:left;

}

#two{
    width:50px;
    height: 50px;
    background-color:#ccffff;
    float:left;
 }

#three{
    min-width:100px;
    max-width:200px;
    background-color:orange;
    height:100%;
    float:left;
}
#four{
    min-width:52px;
    max-width:200px;
    background-color:pink;

}

Check out this fiddle

Div 4 is within div 2. Div 4 needs to always be centered within div 2, regardless of its size.

How can this be achieved? Currently, div 4 is always within div 2. I have tried playing around with floats, positioning, and margins, but the dynamically changing width of div 4 makes centering a challenge.

When text is added to div 4, it should look like this:

 _______________
 | 1  |2  | 3   |
 |  __|___|___  |
 |  |div4 txt|  |
 |  |________|  |
 |____|___|_____|

If putting div 2 and div 4 in a new wrapper makes it easier, I'm open to it, but div 1 and div 3 should always be connected to div 2.

I have also attempted:

  1. Exploring this site :)
  2. Searching on Google
  3. margin: 0 -50%;
  4. position: relative;
  5. display: inline-block;
  6. display: table; (and cells)
  7. and more

Looking for assistance.

ps: div 1 and 3 may not always be displayed. Either can be hidden or both at the same time.

Answer №1

Using absolute positioning is necessary in this case.

#four{
    min-width:52px;
    max-width:200px;
    width: 200px;
    background-color:pink;
    position: absolute;
    top: 50%;
    left: calc(50% - 100px)
}

Feel free to check out this fiddle for a live example: http://jsfiddle.net/5dh66t14/

Answer №2

Here is the CSS code you can utilize:

#four {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

View Demo on Fiddle

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 want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...

Added the .active state to the menu navigation successfully, however the active color was not implemented

My primary navigation menu is managed by WordPress and can be seen below. I aimed to modify the active state when a user clicks on a link in the menu by adding background-color and color for styling purposes. Although changing the background-color upon cl ...

Tips on efficiently inserting numbers into the names of copied input elements

I've been struggling with a problem for hours now and I need help... I'm trying to change the names of my automatically cloned inputs. Here is the snippet of my HTML code: <form id="dodawanie" action="" method="post"> <div class= ...

The concept of vertical alignment within the CSS Grid system

I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout: *A******* *B * *C******* ********* * * ********* ********* * * ********* While the grid template rows a ...

Determine if a user's inputted number matches a randomly generated number using Javascript

I am trying to generate a random number, prompt the user to input a number, compare the two, and display a popup indicating whether they match or not. Below is the code that I have written for this functionality. function generateRandomNumber() { ...

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

When implementing Javascript to create a modal, I have encountered an issue where the close button disappears. The modal opens and loads different HTML files dynamically using the jQuery load() method, but the close button vanishes. I suspect that the mod ...

Adjust the background color of the arrow in an HTML Select element

My select menu looks different in Firefox compared to Chrome/Edge In Firefox, it displays an "arrow button" https://i.stack.imgur.com/BGFvO.png However, in Chrome/Edge, the arrow button is not present https://i.stack.imgur.com/PXNJn.png Is there a way ...

When the browser tab icon does not appear, it is likely due to not responding to the GET /favicon.ico

I am running a web server for my basic HTML page that does not have a web icon included in the template. "HTTP/1.1 200 OK" Content-Type: text/html Connection: close <!DOCTYPE html> <html> <head> <met ...

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

Adjusting the position of the parent div by manipulating the bottom property

Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...

What is the method in PHP to send an HTML file along with a value in response to a POST request?

I have a PHP file where I want to include a dropdown list and submit button. The dropdown list should display filenames for the user to choose from. Once the user selects a filename from the dropdown list and clicks the submit button, the PHP file should r ...

Why is my client program not receiving a response from this socket.io server?

Currently, I am in the process of developing a trivia game where two users engage in answering questions with the winner being declared at the end. As part of this project, I have integrated socket.io to facilitate the exchange of answers. However, I have ...

Unable to retrieve HTML code from a webpage using its URL address

Currently, I am trying to retrieve the HTML code of a specific webpage located at . My initial attempts using HttpClient were unsuccessful due to exceeding request processing time. It seems like this website may have anti-bot protection in place. I attempt ...

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

color of the foreground/background input in a dropdown menu that

I am attempting to modify the foreground or background color utilized by a dash searchable dropdown when text is entered for searching in the list. The input text is currently black, which makes it extremely difficult to read when using a dark theme. Wit ...

Choosing comparable choices from the drop-down menu

I am working on a dropdown menu that contains different options. I need to use jQuery to automatically select the option that corresponds to the branch of the currently logged in user. However, when some option text is very similar, it causes an issue. // ...

Establishing the primary language on a multi-language website

I am currently in the process of developing a website and I intend to offer support for both English and French languages. Up to this point, I've been following the primary solution outlined in this question: How to localize a simple HTML website pag ...

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...