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.
Related
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'm new to CSS and I have a question.
First, my HTML and CSS code:
<!-- HTML CODE -->
<body>
<div id="container">Container
</div>
<div id="inner">Inner</div>
</body>
<!-- CSS CODE -->
#container {
background-color:#b6ff00;
width:500px;
height:500px;
position:relative;
}
#inner {
background-color:#ffd800;
}
With current code, the browser shows the following page:
This is expected.
But if I add this css property to #inner element position:absolute; there will be a following output:
As you can see, the #inner div, takes only that much space it needs. Why this changed with only position:absolute; property added to #inner div?
That's because when you use position: absolute; the element will take up width upto the elements defined/content it contains., cuz it just gets out of the document flow so it is block level in nature but won't take up entire horizontal space on the document, as it's just out of the flow of the document..
If you want it to be full width you need to define width: 100%; explicitly so that it will take 100% of the relative parent's width as well as the height if you declare height: 100%;
Also, make sure you always use position: absolute; with a wrapper element set to position: relative; or your element will fly out in the wild which will eventually end up taking the viewport as the last relative wrapper if you set the position of the element using top, right, bottom or left.
I've explained here in detail, that how CSS Positioning Works
Worth to note that, you make any element a position: absolute; element, it will behave as a block level element, but you need to define height and width so for example, if you turn an inline span element a position: absolute; you can define height and width without making it display: block; (Unless and until you are using display: none; initially)
position: absolute; does not behave the same as block elements.
You will need to set a width and a height for a div that is absolutely positioned.
This is fundamentally how position absolute works. Once taken out of the flow of the document it becomes an inline-block element that is absolutely positioned within the nearest element that is positioned relatively (or the top most element)
If you need it to then be a certain dimensions you can try to set widths and heights, or you can do things like
#inner {
position: absolute;
left: 0;
right: 0;
}
...which would ensure it always stuck to the left and right sides of the screen.
It's generally good practice to put things that are positioned absolutely inside of an element with "position:relative" on it, as your code stands it suggests you want your #inner element to be placed anywhere on the page, whereas if you wanted it to be of a size and position relative to #container your code should look like this:
<body>
<div id="container">
Container
<div id="inner">Inner</div>
</div>
</body>
with CSS such as:
#container {
position: relative;
}
#inner {
background-color:#ffd800; width:500px;
height:500px;
position:relative;
}
You can see your output here:-
http://jsfiddle.net/KggJd/
Let me explain a little:
Postition: relative
This will align itself in accordance with the elements found before (i.e) Prior Siblings.
You can change the position by using margin-top, margin-left, ....
Position: absolute
This will always consider from the browser's start point and won't be in accordance with anything.
Drawbacks:
You cannot consider this as the parent or anything when absolutely positioned.
You can change its position by using top, bottom, right, left.
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
I have been editing a WordPress website for the first time and now I have had a problem where the main content div overflows the footer and i'm not sure how to deal with this.
Here is the website:
www.twazzle.co.uk/twazzle/wordpress/
Any help would be appreciated.
Your #content and #primary elements both have absolute position, so their dimensions won't affect the layout of anything else on the page, when they grow/contract the other elements don't grow/contract to fit. Start by changing these both to position: relative or static, this will cause some other things to break due to the way the css has been written, but you'll have to take that as a starting point to fix it.
You've got a few problems here. One, you have floated elements inside blocks with no float or clears. Two (and this is your main problem) your #content div is position:absolute but nothing else is. With absolute positioning your divs will ignore others resulting in overlapping and other messiness. To fix, before making an element position:absolute make it's containing block element position:relative. You'll also want to fix that float problem.
#main {
overflow: hidden; //this tells it to contain floated elements inside it
}
#primary {
float: left;
margin: 10px;
position: relative; //this will contain nested absolutely positioned elements
width: 999px;
}
I have an image representation of graph made with .png images and -moz-border CSS trick (div id=gholder) I want that graph to be positioned as where the picture shows, And I did it using CSS position: absolute/relative tags, but I'm having problem using the two tag. When I use this CSS code
#gholder {
float: left;
bottom: 460px;
left: 60%;
position: relative;
}
The site shows a big space below the footer, is there a way to remove that big space when using the relative code?
Relative positioning always leaves a space where the element originally was. If you use absolute it should work correctly.
`#gholder { bottom: 460px; left: 60%; position: absolute;}`
You also don't need the float tag.
If the problem is that you want the main content div lines to stretch to the width of both divs, I'd create a div which contains both the content and the graph, and set it to a defined width and have the top and bottom line in it.
Then inside that div define a width for your content div and position it, then do the same for the graph div.
Think that makes sense.