Can anyone help me figure out how to center and place the red box at the bottom of the orange div?
The size of the red box varies from one box to another, both in height and width.
This positioning needs to be compatible with all browsers, including Internet Explorer 7 and 8.
HTML
<DIV class="container"><div class="bluebox"></div></div>
CSS
.container{
position: relative;
top: 0; left: 0; bottom: 0;
}
.bluebox{
padding: 10px;
border: 2px solid blue;
}
SpaceBeers came up with a solid solution, or you could try another variation:
This is the code showcasing a red box perfectly centered:
http://jsfiddle.net/spacebeers/nyndk/1/
The blue container has been bottom-aligned, and within it, the red box has been centered flawlessly.
In order to accommodate the varying width of the red box, simply introduce another wrapper div around it with the properties 'position: absolute', 'bottom: 0', and 'width: 100%'. Then, eliminate the 'position:absolute' declaration from the red box itself so it can center on its own using 'margin: 0 auto'.
.wrap {
position: absolute;
bottom: 0;
width: 100%;
}
.redbox {
height: ?px;
width: ?px;
margin: 0 auto;
}
Here is one way you can achieve the desired layout:
HTML
<div style="" class="container">
<div class="wrapper">
<div class="content">center me...</div>
</div>
</div>
CSS:
.container{
width:180px;
height:180px;
position:relative;
background:orange;
}
.wrapper{
position:absolute;
top:50%;
left:50%;
}
.content{
background:red;
top:-50%;
margin-left:-50%;
position: relative;
float: left;
}
Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...
I'm looking to customize the display of my data in Vuejs by arranging each property vertically. Instead of appearing on the same line, I want every item in conversationHistory to be displayed vertically. How can I achieve this in Vuejs? Can anyone off ...
I attempted to superimpose an image onto a cube by utilizing code from GPT chat and Blackbox AI, but in both cases, I encountered a black screen. I saved the code in a file named test.html and tested it on Google Chrome and Opera GX browsers, only to be me ...
Whenever I utilize nav-tabs to toggle between tabpanels, it functions properly. However, there seems to be an issue when attempting to switch the active tabpanel using the links in the dropdown menu. Below is the HTML for my nav-tabs and dropdown menu, alo ...
I've come across information suggesting that cookie values can be set after the HTML content has been sent from a PHP script to the web server. Despite trying to implement this, I seem to be facing difficulties in setting up the cookies as desired. C ...
Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...
Is it possible to store icons in CSS files and dynamically load them based on props passed into a component? In the provided example found at this CodeSandbox Link, SVG icons are loaded from the library named '@progress/kendo-svg-icons'. Instea ...
I created a small window within a browser window, containing an even smaller window with auto-scrolling text. However, I need some text in the smaller window to remain static and not scroll. Therefore, I used position_fixed which is absolutely related to ...
I want to give each word in my website name a different color or style, similar to this: Currently, I am using: <a href="#">James<strong>.</strong><span>Wood</span></a> (Using "STRONG" and "SPAN" tags inside the "A" t ...
I have a customized youtube video section on my website template that can display either an embedded video or an image based on client preference. Currently, I am trying to implement code that will detect if the youtube video source is empty and then displ ...
I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...
Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...
I am currently implementing a feature that involves tracing a point in an HTML5 video using a canvas overlay. The canvas sits on top of the video tag and is styled as follows: #my-canvas { width: 100%; height: 100%; position:absolute !important; z-index:1 ...
Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...
UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...
Struggling with setting custom styling for a mat-table in Angular Material. I want to adjust the border radius of the table and change the spacing inside to "space-between". The design I'm aiming for is shown here: Design Any tips or suggestions woul ...
I've experimented with a range of HTML elements and CSS styles in an effort to make this work, but without success. How can I achieve the following task? My goal is to have two side-by-side DIVs that automatically adjust their size based on the conte ...
While configuring the Apache CSP lockdown for a site, I encountered an unusual behavior when opening the same file as a PHP script compared to opening it as an HTML file. The HTML file looks like this: <html> <head> <meta http-equiv= ...
When trying to access my iCloud account settings and locate the "Find my iPhone" button on iCloud.com, I am encountering issues with my selectors. It seems like there are no frames on the page, but the Xpaths I'm using are not matching. Here are the ...
I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...