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.
Related
I'm making a pong clone using HTML/CSS/Js. I've set a div element to act as a border for the game, just to keep things in a confined space. How do I get elements (for example, a scoreboard) to act relative to their parent element? For example, if I tell the child to move 50% left, it moves to the center of the parent-div, and NOT to the center of the web-page. Basically I want the child confined by the dimensions of their parent (haha). It seems like
child-div {
position:relative;
}
in CSS would do the trick, but it's not...maybe it's because I'm developing in CodeAcademy's IDE?
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help much further
Here's a quick demo for you.
.container {
width: 80%;
height: 250px;
margin: 0 auto;
position: relative;
border: 4px solid green;
}
.scoreboard {
width: 200px;
height: 50px;
background: lightblue;
border: 2px solid grey;
position: absolute;
top: 10px;
/* just for a bit of space */
left: 50%;
/*almost centered*/
margin-left: -100px;
/* half of known width */
}
<div class="container">
<div class="scoreboard"></div>
</div>
Note...there are other centering methods for absolutely positioned divs depending on whether the width is known and browser support requirements
left: 50%; does not center an element...it moves the element's top/left corner to the center of the containing element. You have to move it back half of it's width (if known)...see above.
One final point....positioned elements are not constrained to their ancestor elements but rather positioned in relation to them. It's quite common to have positioned elements outside the bounds of parents.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.
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 have a div which has a table which has a google map.
I want to place a info box within the google map external to the map, just floating on top
But I can't seem to get it right, the info div just pushes around the google map despite being on top of the map...
CSS
.google_map {
height: 270px;
width: 100%;
}
#flightMapInfo {
position: relative;
float: left;
z-index: 100;
color: #FFFFFF;
top: 30px;
left: 50px;
background:#5a85a5;
padding: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
min-height: 300px;
}
.tableLeft {
width: 75%;
float: left;
border-right: dotted 2px black;
}
HTML
<div class="mapBlock tabContent">
<div id="flightMapInfo">WHARGL</div>
<table class="tableLeft">
<tr><td><div id="flightMap" class="google_map"></div>
</table></td></tr></div>
I wanted to comment on #scunliffe's answers, but this is rather lengthy.
Float says to browser, that rather than normal behaviour, divshould be either left or right and the rest of content should flow around (think: Images in *.doc).
Your problem is, that you confuse english 'float' [To remain suspended within or on the surface of a fluid without sinking] with css' 'float' [stay to 'left' or 'right' border and flow rest of website content around]
What you want to do is take the div out of normal flow of webpage (thus: position:absolute) position it.
Hint:
absolute is relative to 0;0 of first found ancestor, which is relative or absolute. Relativeis relative to 0;0 of what would be position in normal flow.
Relative divs* act as if they were on their original place , they are just rendered shifted. Absolute divs* are taken out of flow of website and position accordingly to hint above.
by div, I mean any styled tag
I apologize if you know all this and just can't make it work.
EDIT
In position:absolute; this means first found ancestor:
<body>
<div id="wrapper">
<div id="innerWrapper">
<div id="content">
and two CSS cases:
1.
#content { position: absolute; top: 10px; left: 20px; }
2.
#innerWrapper { positon: absolute; top: 200px; left: 200px; }
#content { position: absolute; top: 10px; left: 20px; }
In case one, since nether #wrapper nor #innerWrapper have set position, first absolute or relative ancestor in tree is body, thus positioning of 10px;20px is made from 0;0 of body (read: viewport) - #content is at 10;20 of window.
In case two, #innerWrapper is set absolute, thus making 200;200 of window a point, which is understood as 0;0 when positioning #content. Therefore (absolute ancestor found), content will be at 210;220 of window
Example: http://jsfiddle.net/3dq6V/
I think you are looking for position:absolute; not float:xxx.
Float just indicates that it will "flow" with the other elements on the screen... you want it to float above the other content and not be constrained by it, thus you want absolute positioning.
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;