the div with the word test it in, just will not go up the top right..... despite me floating right and specifying top 0
http://www.e-fluential.com/offline/
HELP!!
Thanks in advance
You should give the element the following properties:
position: absolute;
top: 0;
right: 0;
This will make the element go to the top right corner. If you want the element to go to the top right corner of its parent you should give the parent the following property:
position: relative;
This will position the element relative to its parent.
Another solution would be to wrap the elements on the left with a wrapper, which you will then need to give a width and a float: left;, do the same with the elements that should go right but instead of floating it left give it a float: right;. The total width of both wrappers should not extend the width of the parent.
You'll probably want to go with the second solution because you don't need to give your elements absolute coordinates that way.
Positioning elements
Floating elements
Related
I have a main wrapper div with a content div and a button. The button is supposed to go underneath the content div but for some reason it's overlapping with it.
The content div has css:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I thought since they're both inline-block that they wouldn't overlap, but for some reason they are. I made a JsFiddle to show: http://jsfiddle.net/b5hp6boz/
Can anybody help me get the button to display beneath the content div?
Remove the (extensive) use of absolute positioning.... Change it to position: relative; if necessary. But on many elements even that is not necessary.
Move the button div up to under the <h4>add members</h4> in the HTML where you appear to want it.
Then adjust margins for #DIV_05 and the button.
Fiddle Update or Fiddle Update 2
(Note I merely performed a search to change absolute to relative in your CSS, then adjusted from there.)
By using absolute positioning so extensively you were forcing elements into unnatural positions. Then when it wasn't working out.. you are left wondering why. Let things fall where they naturally want to fall. Change the HTML for overall render order, don't force things with absolute positioning.
Use of absolute position is most commonly used to adjust z-index and make elements not alter positioning of other elements. (like a global float of sorts) It should not be the fall back for positioning everything in any layout.
The problem in your code is that you have given the #DIV_5 the following CSS:
position: absolute;
By giving a HTML element an absolute position it is removed from the normal rendering process by not obtaining any space in the document. That means it is not affecting the position of the following BUTTON_105 element. That's why the button is positioned right underneath the H4_4 element (which is the first element not having an absolute position).
To fix that simply remove the position: absolute; declaration for #DIV_5. (Btw: You should try not to make heavy use of absolute positioning as it can cause further issues.)
Try giving your div tag a higher z-index value.
What is the difference between float:left and float:right within a parent with position:relative? In my testing, both result in a div being floating in the top-left corner of it's parent, overlaying the image (unless I manually position the div using right: 0px).
I can see a difference with position:absolute. float:left needs it to overlay the div over the image, with float:right I can omit it and still get the overlay effect.
Can anyone enlighten me what's going on here?
My problem is illustrated in this jsFiddle.
HTML:
<div class="parent">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>
CSS:
.parent {
position:relative;
width: 200px;
}
.tag {
float: right;
position: absolute; /* can omit when using float:right */
/* right: 0px; */ /* uncomment to right-align child */
}
Edit:
I was mistaken with my statement about position:absolute and float. Somehow I got the impression when playing round with the jsFiddle, sorry for the confusion. Thanks for all your answers.
You cannot use float on an element that has set position: absolute;. Just use left: 0; or right: 0; to align them inside the parent which has position: relative;.
Also, position: relative will not touch the float behaviour of your children. It is just the position: absolute which disables the float functionality. which is the reason that your float: right is also on the left top side. With position: absolute you want to explicitly say where the element is located. floats do not fit into this role and will therefore have no effect.
Absolute positioning takes that element out of the normal flow. So when you try to use float it has no effect because it cannot flow within your .container to "float." You are telling it to ignore the rest of the elements for absolute positioning. With absolute positioning you have to state where you want it to reside within your parent. So #Francodi solution is correct. Just further explanation.
Float does neither affect elements that are position:absolute nor the parent child relationship. It only concerns elements living on the same DOM level. float:left will let the element float on the left and the other way round. clear: both applied on an element stops the floating there:
http://jsfiddle.net/MUP59/
Imho you are better of using display:inline-block most of the times.
I have multiple Div's that I am using as buttons. If I set the postition to relative I can use float left to put them all on one row next to eachother. They also appear at the top of the parent div. I want the buttons to appear at the bottom of the parent div. Is it possible to give an element two position values as in
position: relative;
float: left;
and also
position: absolute;
bottom: 0;
I have a feeling this is a logic error of some kind and I am not sure how to do this logic.
just put them into wrapper
<style>div.buttons{position:absolute;bottom:0;}</style>
<div class="buttons">...</div>
if float is problem, use display:inline-block; for positioning add position:relative to the parent div, and use position:absolute to child divs.
Please note with display inline-block you need to extra hack for IE7 *display:inline (if you are still supporting it), and if you see white space btw buttons, refer
I've got a project where I need to top-right align a div so that it sits on top of an existing variable-width td.
What has me stumped is the variable width aspect. I can get the div to sit on top of the existing relatively positioned td by using fixed positioning for the div. However, because the TD width can change I can't set a "left:" value for the div.
I've created a fiddle to demonstrate it with left aligned in the td, now I just need to get it to right align:
jsfiddle.net/ErDr6/36/
I've looked at some other posts, but they seem to deal with fixed width elements:
Align div with fixed position on the right side
Firstly, change position: fixed; to position: absolute; so that the arrows won't stay fixed relative to the viewport when the page scrolls. Then, add the following:
#col_arrow {
right: 0;
}
.wc-day-column-header {
position: relative;
}
That will align the arrow to the right of its parent. We add position: relative; to the parent to restrict it to that container.
If it needs to be dynamic then absolute position can be calculated as:
theTD.offsetLeft+theTD.offsetWidth-arrow.offsetWidth
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;