I've always thought I understood margins and negative margins but apparently I don't! I've just started a new design and running into problems already.
I have a div (hill3Cont) and another div (hill3Hill) nested inside, and this is the CSS for them.
#hill3Cont
{
width: 100%;
background-image: url("images/grass.jpg");
}
#hill3Hill
{
margin: -100px 0 0 0;
height: 600px;
width: 100%;
background: url("images/hill3.png") no-repeat center top;
}
I have applied a negative margin to the top of the child div in the hope it will push this content up outside the boundaries of the parent div. But it doesn't, it doesn't move. If I apply a positive margin it pushes the parent div down along with the child inside it.
The only way I can make it behave properly is use a border or overflow hidden on the parent div, but the design won't allow for either of these (I don't want a border and overflow hidden hides the child).
Maybe it's just been a long day and I'm missing something common! Many thanks in advance.
Edit:
I have got a solution, I've put a single padding top on the parent div, padding: 1px 0 0 0. It works for my design so I'm happy but still keen to find out what's happening.
For child inside parent element use position relative and negative top instead.
http://jsfiddle.net/GEwj3/3/
#hill3Cont
{
margin-top: 50px;
width: 200px;
height: 200px;
background-color: red;
}
#hill3Hill
{
height: 50px;
width: 100px;
background: blue;
position: relative;
top: -20px;
}
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.
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.
If I wrote this:
#element {
margin-top: -50px;
}
By general rule, it would move the element upwards by 50 pixels.
Recently, I accidentally used this bit of code instead:
.elements {
margin: -50px;
}
So I had these <div> tags, one beneath the other, and by writing margin: -50px; they all somehow got closer together.
But thinking in retrospect, I don't really see how this worked. The size of the elements didn't change (as far as I know, as they contained child elements, and the child elements were closer together as well), and they didn't seem to zoom in size or anything.
I did some research online, but all I could find was for negative margins on one or two sides at most.
Is there an explanation to this? What actually happens? Maybe it's because I'm using Google Chrome, and maybe nothing happens in other browsers?
Tha margin is not added to the appearance of the element but rather to its bounds, so basically your element looks e.g. 200x200 but its bounds are equal to that of an element of 100x100 since you substract 50px from every side. Try it for yourself:
Fiddle here.
HTML:
<div class="e1"><div></div></div>
<div class="e2"><div></div></div>
CSS:
body {
padding: 100px;
}
div {
width: 200px;
height: 200px;
float: left;
margin: -50px;
}
.e1 {
background: red;
}
.e2 {
background: yellow;
}
.e1>div, .e2>div {
width: 100px;
height: 100px;
outline: 1px solid blue;
margin: 50px;
}
I've added a padding to the body to make the elements be pushed down so you can see the overlap they cause. Updated so you can see the bounds of the squares that result.
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
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.