I tried positioning a div element using margin-bottom. For some reason the margin-bottom doesn't appear to affect the position of the element. I tried searching for an answer, though all answers had something to do with position:absolute, and I still couldn't get it to work.
However, I did manage to position it using a negative margin-top, but I'm still curious to know what causes it not to work.
Heres the fiddle showing the HTML/CSS.
(what I'm talking about is the image. The margin-bottom is set to 100px.)
Try to put the position absolute property in the DIV with the class "productImage". Like this, for example:
.productImage {
display: block;
float: left;
position: absolute;
left: 450px;
top: 60px;
}
Using this i've manipulated the image sucessfully. I hope it can help you.
A margin on the bottom would only work if the element was positioned via bottom somehow. Right now, it's positioned based on its top and that is being set by the H1. If you don't want the H1 to be a block, set it to display:inline-block. You could also set the width to be that of the paragraph.
As you noted, this is why a negative margin-top works.
Use one of the following:
Negative (or simply smaller) margin-top
position: relative and a negative top
Further explanation:
margin-bottom, in normal document flow, will only affect the position of elements that come after it, due to the fact that normal block-level elements will expand their height with the height of their children. Thus, the position of your element is determined by the elements before it, as well as its own margin-top.
Consider adding display: block.
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.
I have a project that hides and shows elements using the visibility parameter. Another element is pushing the text in these elements down and I need to know if there is a way to force the text back to the top of its element. I have tried different display parameters, floats, etc and haven't found anything (other than absolute position) that will work. The problem with absolute positioning is that the container div will then hide overflow instead of expanding with the content. JSFiddle
check JSFiddle for example and code
The problem you are having is the relative position of the list:
#list {
position: relative;
left: -25%;
}
If you switch to using margin-left instead of left, you get the layout you want:
#list {
margin-left: -25%;
}
http://jsfiddle.net/TL969/2/
With relative positioning, surrounding elements are not affected by adjustments. Surrounding elements are layed out as though no adjustments were made to the positioning. By positioning it with negative margin instead, surrounding elements are affected, and thus you free up room for the text.
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 was fiddling with my web-app to try and get a div to wrap around some p elements. The structure looks like this, i.e. pseudo-code ...
<div id='outer'>
<p></p>
<p></p>
<p></p>
</div>
What I found is that if I set the outer div to
position:absolute;
instead of
position:relative
that the div would correctly wrap around only the p elements.
Otherwise it would extend all the way to the very right of the page, and I had previously had to set the width manually.
What is governing this behavior?
Also, the p tags use
display:inline
and the containing div just uses the default display.
This CSS below works well in my app.
// outer div
#mi_control {
position: absolute;
left: 580px;
top: 660px;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
}
// p elements
.menu_bottom {
margin-left: 18px;
display: inline;
}
This is a common issue..
I quote:
Question: relative div takes 100% width automatically but absolute div only takes content width. why?
Answer: Setting position:absolute removes the element in question from the normal flow of the docment structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
By default, a div element is set to display: block;. Block elements will be 100% of the width of the parent element.
When you set an element to position: absolute; it takes it out of the document flow and the element is no longer sized according to the parent element. It can mess with your layout though.
My recommendation is to set the div element to display: inline-block; - this will make it sized as per its contents, but will not remove it from the flow of the document.
#outer
{
display: inline-block;
}
I don't know exactly what rules governing this behavior but what you observed is the right behavior and is consistent across all browsers. A DIV takes minimum width when its position is set to absolute or fixed; otherwise it takes full available width.
The default value for width for a div element is auto.
This means that it will take up the full with of the available space, or more if the contents forces it to. If you use position: absolute however, you take the element out of the document flow. As there is nothing that it can relate to as the full width any more, it will use the width that the contents forces it to use.
The behaviour is governed by the spec. Absolute positioned elements have dedicated rules about how widths are calculated: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
Once it is set to absolute, it is taken out of the normal flow of content. Absolutely positioned elements always appear in the top left corner, unless otherwise specified. The element will also shrink to be only as big as it has to, because that's how position:absolute works
divs naturally have a width of 100%, so that is why you have to set the width manually. Relatively positioned elements behave almost identically to statically positioned elements. The only difference is how they can be moved
Not sure what you are seeing but even if your div is positioned absolutely, it will STILL wrap your P tags
http://jsfiddle.net/8MSDH/
you are seeing it at the bottom right because you set your top and left
left: 580px;
top: 660px;
I have always used margin to move a floating div to the correct position in a parent div (say the logo div within a header div). This has always worked but that meant you have to play with the individual height of the elements else it will affect the remainder of the layout downwards.
I found another method today and that is to make the logo div position: relative; and then use example top: 20px; to move the element around, and this does not appear to affect the layout.
I don't want to adapt to this without knowing that there may be other implications, so can anyone point out common flaws in either of the above methods or possibly suggest a better solution?
// Sample HTML
<div id='header'>
<div id='logo'>
LOGO GOES HERE
</div>
</div>
// Sample CSS
#header {
height: 100px;
}
// Version 1
#logo {
float: left;
margin-top: 20px;
}
// Version 2
#logo {
float: left;
position: relative;
top: 20px;
}
From Mozilla developer:
relative
Lay out all elements as though the element were not
positioned, and then adjust the element's position, without changing
layout (and thus leaving a gap for the element where it would have
been had it not been positioned). The effect of position:relative on
table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
I hope this answers your question.
Sometimes it might be the right thing to use, other times not. It really depends on your layout, if you want to make a responsive design, it might be better to have the margin there.
In your case you have a fixed height on the header, so you can use relative. I think it is a more common practice to use margin. I am only aware on issues concerning position: fixed on mobile devices.
You can learn more about CSS and positioning here.
In postion absolute and fix when u use top or bottom or right or left,you must not use float, you must for its parent use this style
postion:relative;
best regards