I'm trying to get spacing before and after my background colour to my header. I can get the left side spacing by using:
header {
background-color: #888888;
position: relative;
left: 60px;
top: 3px;
}
But, when I want to add spacing to the right by adding right: 60px, It just ignores it and the colour reaches the right of the page.
Any help is appreciated.
What's about using margin instead of position: relative + top/right/left?
header {
background-color: #888888;
margin: 3px 60px 0;
}
<header>Header</header>
JSFiddle
About left/right from MDN:
When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).
It seems you need to set:
header{
background-color: #888888;
position: relative;
width: calc(100vw - 120px);
margin: 3px 60px 0 60px;
}
width: calc(100vw - 120px); is calculated width that equal 100% of viewport width minus 120px. after that you just need to set equal margins (60px) on the left and right sides
You seems to misunderstand the function of left or right. It does not just give you left or right space but moves / positions the entire element(header) to the left or right. It goes in hand with the property position: relative.
In your case you are just positioning the header to right first by 60px and then positioning it back towards left by 60px which brings it back exactly to the same position, hence no gap seen. This is not the right approach.
Instead just use margin to give you the space required like so:
header{
... left, right not needed ...
margin: 0 60px 0 60px;
...
}
Related
Please take a look at the attached image, it makes it easier to understand.
In general the question is just how to absolute position an element left:100% while making it appear a bit less than 100%. Margin doesn't seem to work in absolute positioning.
I created a resizeble element with jQuery, and there is a right 'bullet' for the user to resize the element. I don't want to bullet to be on top of the container's border, so I set its position to absolute, and left: 98%.
Problem is - resizing the element takes the bullet to the left or right of the container's end, depending on its size (because the position of the bullet is set in percentages). Only 'solution' is to set its 'left' to 100%, but then the bullet is on top of the div. Adding a non breaking space after the bullet also didn't work since I had to set the left to 98% to contain both the bullet and the space.
What do you think? Is there a simple solution I didn't come up with?
Thanks in advance,
OmerImage
Edit: Jila here offered a simple solution of using calc:
#myContainer {
position: relative;
display: inline-block;
box-sizing: border-box;
}
#bullet-right {
position: absolute;
left: calc(100% - 16px);
margin-right: 10px;
top: 40%;
color: blue;
z-index: 5;
}
I tried 100% - 10px without the calc before and it didn't work obviously
Hope it can help others and thanks Jila
left only works on a positioned element. That is to say, any element that does not have the default static positioning. In addition to this, you should never set left: 98%; you should set right: 2% to prevent any confusion.
If you want to set a left offset on a dynamic element, you're looking for margin-left.
This can be seen in the following:
.container {
border: 1px solid black;
padding: 20px;
}
.text {
border: 1px solid black;
margin-left: 5%;
padding: 5px;
display: inline-block;
width: 85%;
}
input {
margin-left: 2.5%;
}
<div class="container">
<input type="radio">
<div class="text">Text</div>
</div>
how to absolute position an element left:100% while making it appear a bit less than 100%.
Don't use left: 98%;. Use right: --;. Since, as you state, percentages are dynamic, decide on a fixed value for the element offset. For example if you choose 10px the element on the right would be right: 10px and the element on the left would be left: 10px;.
If you really really want to use left for the one on the right use left: calc(100%-10px);, but there's no real reason for doing that when you can use right.
Can anyone explain me the usage of top, left and margin-left and margin-top in the below code? I see we have given top a value and also margin-top a negative value. What does this actually achieve?.
#volume {
width: 250px;
height: 13px;
border: 1px solid;
position: absolute;
cursor: pointer;
background: #dddddd;
top: 80%;
left: 35%;
margin-left: -125px;
margin-top: -15px;
box-shadow: inset 0 0 12px #dddddd;
}
http://codepen.io/anon/pen/rbliK
Margin describes the space between your box and adjacent boxes. Setting a negative top margin indicates that you want negative spacing above your block. In simple words, margin to control the spacing between neighboring boxes and positive top-margin pushes content down, a negative top-margin pulls content up.
top and left on the other hand are positional attributes that specify where your box is located. The top left bottom right attributes specify the location of the respective edge of your box including its margin.
if you wanted the element to have no effect on the surrounding elements, you'd use top left bottom right
Check here for more info:
link
I have a DIV containing an image and a second DIV. The parent DIV is set to position: absolute; the child DIV is set to position: relative. The idea is that I display my photo caption on top of my image.
The child DIV should have 100% width of the parent, minus 10px on the left, right and bottom, plus a black background.
.article-container {
position: relative;
}
.photo-caption {
width: 100%;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
<div class="span15 article-container">
<img src="images/example-image-1.png" />
<div class="photo-caption">This is the subtitle text on top.</div>
</div>
The left margin bumps .photo-caption outside the bounds of .article-container. The right margin doesn't seem to have any effect.
I've also tried fixing this with box-sizing. It seems to get the width of .photo-caption down to the parent width but there's still the overhang.
It's better if you remove width:100%. write like this:
.photo-caption {
left:0;
right:0;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
An absolutely positioned element is positioned with top, left, right and bottom, not with margin.
The problem is that width=100% would give photo-caption exact width of article-container; adding margins (or padding) would not affect width calculation. You can do this yourself using the css calc() so the style become:
.photo-caption {
width: calc(100% - 20px); // 20 = right margin + left margin
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
Note that you might want to check for calc() browser support here
The problem is that you're setting your width to 100% which gives no room for margins. Instead adjust your width to a percentage less than 100% and then specify your margin as half the percentage of the remaining space.
For Example:
style="width:98%; margin-left: 1%;"
Use either padding in conjunction with box-sizing, or nested block with margins inside your absolutely positioned one without margins.
You don't need width:100% if you display block. That might solve all these little issues.
.photo-caption {
display:block;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
padding:10px
}
For:
Simple answer : don't try to use margin-right . Use ' margin-left: xxxpx; ' - make the xxx large enough to push your div box (Div Style= box) right as far as needed. No need for a fiddle, can put it exactly where you want it.
Margin is the distance from each side to the neighboring element OR the borders of document.
Margin right didn't means that it will push the element towards left.It means that it will generate space on right side.If next element will come it will come after mentioned margin-right.In your case width is 100%.No space is available for margin-right.
Confusion point:
1) visual effect is different where width is auto.Same margin is generated in right.But due to absence of width property.Width is free to change.
2) Same effect when element is floated right.
These 2 above mentioned points will made different image of margin-right in mind.
width: -webkit-fill-available;
I'm using this 'version' of sticky footer: http://ryanfait.com/sticky-footer/
Here's where I'm trying to get this to work: http://www.ewsprojects.com/~lyons
I want it to stop at the end of the left column, but for whatever reason, I can't get it to stop before anything other than the header. Is there any way to make it stop after the left bar in the manner that is demonstrated in the first link?
Here's the CSS:
* {
margin: 0;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}
#footer, .push{
height:40px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
}
If you need me to provide any additional info, please let me know.
I'm assuming you want it to go no higher than the left column, but want it to stick to the bottom of the page if the page becomes taller?
If that is the case then the reason the footer is allowed to go higher than the left column is because the left column is absolutely positioned. Because of this your container div has nothing forcing it to be a certain minimum height and so it becomes shorter than the left column when they browser window is smaller.
Try this:
Add overflow: hidden; to your #container div
Add margin: 0 0 50px; to your #left_bar div
Make sure #container has margin: 0 0 -40px; (Sorry I told you to remove that before)
Remove the position, left and top rules from your #left_bar div
Remove the position rule from your #account_links div
To be honest I'm not sure why you needed to absolute position a lot of this layout.
Edit:
I edited the list above because I missed some things.
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;