I checked MDN to see what means to have an auto value for margin property and it says: "auto is replaced by some suitable value, e.g. it can be used for centering of blocks."
But what it is that suitable value, and suitable for what?
I tried myself some experiments and I saw that if I add margin-left: auto, the container goes to right (like is floating to right):
#container {
background: red;
width: 120px;
margin-left: auto;
}
http://jsfiddle.net/sph2j6jx/
Does it mean that adding margin auto is actually something like "take all the space available"? And when you add both left and right margins it centers the div because it tries to take all the space from left and from right?
Auto margins
Depending upon the circumstances, provision of an auto value instructs
the browser to render a margin according to the value provided in its
own stylesheet. However, when such a margin is applied to an element
with a meaningful width, an auto margin instead causes all of the
available space to be rendered as whitespace.
From w3.org
#main {
width: 600px;
margin: 0 auto;
}
<div id="main"> Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.</div>
Related
I have an a sidenav for my AngularJs application with a width of 75px. I need the margin to be equal on the container of the content so I have added extra margin onto the left margin (which varies depending on the viewport size), to compensate for the sidenav, and given the auto value to the right, like so:
.container { width: 92.5%; margin: 0 auto 0 9.5rem; } //right auto, left 9.5rem
Issue is that depending on viewport size, the right margin isn't always equal to the left. I can adjust the margin so it is equal, for lets say, 992px, but as soon as I increase/decrease the size, the right side is no longer equal and the container visually looks unbalanced.
Question
What CSS property do I use to maintain an equal margin on both sides when I have to use a static value for the left margin?
Here's the JSFiddle
The problem is that your app-container starts from the body and not from your container, you can add this, then it will be equal and not break the container
.app-container {
padding: 0 1%;
width: calc(100% - 75px);
left: 75px;
position: absolute;
}
A better solution is "the bootstrap way" (use bootstrap or something similar - all float:left, and define width in percentages)
I'm trying to eliminate the extra space in the #middle-panel underneath the .box-label text, but I need to maintain the functionality of the #middle-panel expanding when I get to smaller screen sizes and the text becomes stacked. But if I set a specific height on the #middle-panel to eliminate the extra space, it no longer expands to accommodate the stacked type.
This fiddle shows my current implementation:
Current Fiddle
If, in the fiddle, you add height: 65px; to the #middle-panel-inner-div, you will see the desired amount of space below the text. Unfortunately, if you then change the width: of the .red-box-and-label class from 25% to 20% (to represent what will happen at smaller screen sizes), you will see the text becomes stacked, but the #middle-panel doesn't expand to accommodate it. Delete the just-added height: 65px; and you will see that the #middle-panel has now expanded to accommodate the text, but once again with too much space on the bottom.
I've tried some solutions, such as: Div overlapping & wrong height
but none of them seem to work.
Any suggestions would be greatly appreciated!
This thing is happens because height is auto and parent div expand height depend on child div. So it takes it's child div height. Even though you give negative top value.
The solution of this issue is, remove negative top value and give margin-top to .red-box-and-label
Remove top: -30px; from #middle-panel-inner-div. And:
.red-box-and-label {
margin: -30px 0 0;
padding: 0;
width: 25%;
}
Updated Working Fiddle
Normally you'd need an inner wrapper for the #middle-panel-inner-div with a negative bottom-margin to compensate for the 30px you moved the boxes up with. But if you place it, you'd have to move all the flex properties from #middle-panel-inner-div to the inner wrapper. So it's easier to just make an outer wrapper for it, move the top:-30px; position:relative to it and add the margin-bottom: -30px to #middle-panel-inner-div.
Here's your updated fiddle.
Notice the change in markup and the relevant CSS code:
.aWrapper {
top: -30px;
position: relative;
}
#middle-panel-inner-div {
/* top: -30px */
/* position: relative */
margin: 0 auto -30px;
}
I want to position a div beside another one. They both should have a width of 100%, whereby the left div has a width specified in px. This width can vary. I want the right div to expand to the right side, so that both divs together take 100%.
I've made a fiddle to describe my problem: http://jsfiddle.net/2gWLn/
As you can see the words "right" are not in one line. I've tried to solve that by applying a padding-left or float: left to the right div. But this does not work because the width of the left div can vary, so I can't specify that as padding-left.
How can I solve that?
The following may work:
.right {
width: auto;
height: 200px;
background-color: yellow;
overflow: auto;
}
Set overflow: auto to .right and this will establish a new block formatting context for .right and hence, prevent the content of .right from interacting with the adjacent floated element. Also, set the width value to auto instead of 100%. (A width value of 100% works in Firefox, but not in Chrome or IE.)
See demo: http://jsfiddle.net/audetwebdesign/9X6VY/
I've read alot about this problem and I think I make everything right, but something is missing.
Here is my code:
<div id="text">some text</div>
#text {margin: 0 auto; width: 1000px; display: block; font-size: 24px; color: #000;}
http://jsfiddle.net/yKBQD/
Looks like you're looking for text-align: center style, no margin: 0 auto: DEMO.
margin: 0 auto version would require another element within div#text: DEMO
Auto margins centre an element by increasing the left margin until it is equal to the right margin. If the element is wider then its container, then it will not shift the element at all. The JS Fiddle frame is rarely going to be over 1000 pixels wide.
Auto margins centre an element, not its content. You won't be able to see the position of an element (if it is as wide or wider than its container) unless you add a border, background, outline, etc so the edges become visible.
To centre inline elements and text inside an element, set text-align: center on the element containing them.
I'm using CSS as follows:
.center
{
width: 30%;
position: absolute;
margin-left: auto;
margin-right: auto;
display: block;
height: 100%;
text-decoration: none;
overflow: hidden;
right:0;
left:0;
}
It doesn't work without the
right:0;
left:0;
(I found that solution in a comment here)
Why?
Okay, so bear with me... this whole thing has to do with the Visual formatting model, in particular with the way in which widths and margins are calculated.
There are several things that need to be taken into account, like display and position (which can all be seen on section 10.3 of the CSS spec).
For your case in particular we are talking about absolutely positioned non-replaced elements (since it is not an image or anything with intrinsic size), so it's section 10.3.7 Absolutely positioned, non-replaced elements.
According to your css, you have a defined width, so not auto, and both your left and right margins are auto. So it boils down to what are the left/right values:
If left/right are defined, so not auto, the following rule applies:
If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values (...)
If left/right are not defined, so they default to auto, the following rules apply:
First:
set 'auto' values for 'margin-left' and 'margin-right' to 0 (...)
Second:
if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
So you can see that if you do not define a specific value for left/right, your margins actually become 0 and you end up having the div either to the left or to the right of the container depending on the value of the direction property (you can test this by putting something like html { direction:rtl; } on your css, the div should go to the right instead of the left when left/right are auto)
However if you do specify the values, in your case 0, the "two margins get equal values" effectively centers the elemement.
Hope it helps!
"For absolutely positioned elements, the top , right , bottom and
left properties specify offsets from the edge of the element's
containing block (what the element is positioned relative to). The
margin of the element is then positioned inside these offsets."
Source: MDN
That's why it works - by setting the left and right attributes you're stretching the element's offset to be 100%. And inside that 100% width the margin: auto works as usual.
It's a bit unexpected to see "absolute" (which is used when you want to control the position of the element on the site) and then "auto". Nevertheless, you might have a good reason for doing that. I'd suggest that since you're using the style
position: absolute;
you could center it by specifying the style
left: 50%;
margin-left: -40px;
under the assumption that your component is 80 pixels wide.