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)
Related
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
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;
}
If I have a block level element and I select it in CSS and declare the CSS rule margin: auto; then nothing happends. But when I include width: 100px; it suddenly becomes centered in the middle of the screen. Why does including width make this occur?
It actually does center the div! If you try to put a color to the div you will see that the div actually fills the whole width of the page and is actually centered (or better to say that they have filled the whole that they have no place to move horizontally).
divs fill the width of their parent automatically if you don't define a width to them.
If you put `width: 100px' to them that just makes it obvious that it was actually centered.
UPDATE (hungerstar wants it to be more technical):
You have a parent container with a 500px width and a child in it that you have styled margin 0 auto;
That child is centered but it's just not obvious. Why? because that div automatically fits itself inside its parent (divs have width: auto; as default if you don't specify it) therefore its width is also 500px with space left for it to move horizontally in its parent.
If you specify a width larger than 500px then it will spill to the right of its parent container because browsers prioritize the left margin first but if you specify it with 400px as width then margin: 0 auto; will kick in and calculate the left margin first by (parent_width - this_child_width)/2 and then assign the right margin by whatever space left based on that equation.
Therefore we have this_child_width = 500px and parent_width = 500px therefore (500px-500px)/2 = 0. 0 margin on the left and right = CENTERED.
It's pretty simple actually. Auto-calculating the margins needs a reference point.
The equation would look like this:
container - width = total margin allowance
Given a 1000px container and 700px element inside the container:
1000px - 700px = 300px for margins
If you only had one auto margin, then that margin would be 300px. If you had two margins, like margin: 0 auto;, which sets the left and right margins, you would get 150px for each the left and right margin, 300px / 2 = 150px. Adding the same amount of margin on each side of a set width block level element is what creates the centering effect.
Now try the equation without a set width.
1000px - ?? = ?? for margins
Single margin is ?? / 1 = 100% of ?? and two margins are ?? / 2 = 50% of ??.
Percentage width work fine also because:
1000px - 50% = 500px or 1000px - 500px = 500px (as 50% of 1000px is 500px)
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>
This is my site.
I'm trying to make the image at the top span 100% width of the browser.
However, i'd like the text to remain the 800px width it is now – and keep it centered.
at first sign you need check all margin and padding. And set all parent node width:100%
From your css i see
#site {
margin: 0 auto;
padding: 50px;
}
At least 50px from each side will be there