Playing around with some absoloute divs I have in my header. logo, search bar etc and trying to get them centered.
Will margin: 0 auto; ever work with an element set as absolute?
I know of some options to center divs within a 100% width such as calc, transform, flex. Are there any more centering 100% options?
Yes, it will work if the element is positioned correctly and has a width specified.
In the example below, left: 0/right: 0 is added so that the element is centered relative to the parent. For instance:
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
margin: 0 auto;
left: 0;
right: 0;
}
<div class="container">
<div class="absolute"></div>
</div>
Alternatively, you can also use a combination of left: 50%/transform: translateX(-50%) in order to center the element horizontally.
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
left: 50%;
transform: translateX(-50%);
}
<div class="container">
<div class="absolute"></div>
</div>
Related
In the example below, I would like word wrap only to happen if the left side of position-me hits the left side of the screen like this.
I think that currently #position-me inherits the width of the parent element and even if I set width: auto !important; in #position-me it still wraps at the parent width.
If I set white-space: nowrap; on #position-me then it overrides the 100px width, but the text overruns the div (and the page potentially!)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: auto;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -100%);
width: auto;
height: auto;
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
https://jsfiddle.net/pfa89bu1/2/
Use a big negative margin left, limit the width to the width of the screen minus the red box width and use bottom/right for the position:
#wrapper {
position: absolute;
bottom: 0;
right: 0;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
bottom: 100%;
right: 100%;
margin-left: -200vmax;
max-width: calc(100vw - 100%);
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
I am trying to center the ajax loader. But no luck. Loader appears on right corner of the screen. Appreciate assistance. Below is the code
div.amshopby-overlay {
background-color: #fafafa;
height: 100%;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50);
position: absolute;
top: 0;
width: 100%;
z-index: 555;
}
div.amshopby-overlay img {
top: 100px;
left: 45%;
display: block;
position: absolute;
}
div.amshopby-overlay div {
margin: 0 auto;
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
}
Try this css.
<div class="container">
<img src="loader.gif" class="loader">
</div>
CSS
.container{position:relative; height:300px;width:300px;}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
A solution I like to do when whatever I'm centering is just an image is to do it with the css background property:
HTML
<div id="container"></div>
CSS
#container.loader{
background:url('loader.gif') center center no-repeat;
}
Now in your javascript, add the class loader when you make the ajax request and remove the class on complete.
So I assume the div inside the amshopby-overlay contains your loader image. Give it a try:
div.amshopby-overlay div {
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
/* Add this */
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: 150px;
}
Basically, top and left will push the div 50% from top and left. And we will add -50% of the div width and height value to center in vertically and horizontally. Give it a try. Hope it helps.
"margin: auto" should give you the centering style you want. CSS details below.
HTML
<div class="container">
<img src="http://placehold.it/150x150" class="loader">
</div>
CSS
.container {
/*Absolute positioning will now be relative to this tag*/
position:relative;
/*Arbitrary Height*/
height:300px;
width:300px;
/*border to show container*/
border: 1px solid;
}
.loader {
/*Allow top, left, right, bottom
to be set relative to container*/
position: absolute;
/*Set edges of tag so margin auto knows the max boundry*/
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/*Allows the use of margin auto*/
display: block;
/*Horizontally and vertically centered
(Display block will fill remaining margin space equally)*/
margin: auto;
}
jsfiddle
http://jsfiddle.net/16vrxgxh/1/
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:
<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
<div style="width: 400px; margin 0 auto;" id="child"></div>
</div>
The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.
#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
jsFiddle
When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.
Tested in FF 3.6, IE7 and IE8
I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.
#wrapper {
margin: 0 auto;
padding: 10px 0 10px;
width: 200px;
background-color: #eee;
}
#child {
margin: 0 -50%;
width: 400px;
background-color: #ddd;
}
This way you don't need to know the element sizes ahead of time.
I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.
This is how I solve it:
http://jsfiddle.net/WPuhU/1/
Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.
css:
#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}
/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
width: 100%;
overflow:hidden;
/* remove the next 2 line for a normal flow */
position: absolute;
z-index: -1;
}
#center-3 {
position: relative;
margin: 0 auto;
width: 200px;
}
#center-2, #center-1 {
position: relative;
width: 400px;
}
#center-2 {
left: 50%;
}
#center-1 {
left: -50%;
}
html:
<div id="center-4">
<div id="center-3">
<div id="center-2">
<div id="center-1"></div>
</div>
</div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>
#parent {
position: relative;
width: 100px;
overflow: visible;
}
#child {
width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}