I have the following mark up:
<div id="playArea" style="position: relative;">
<div style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div>
<div style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div>
<div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div>
</div>
But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.
I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.
Thanks
If I understood correctly, you just have to give the "playArea" div the right height.
Edit: I mean, the combined height of everything inside it.
But i would like to have a paragraph of text under the 'playArea' div, but because all the divs inside playArea is absolute, the text doesnt appear at the bottom of the last absolute positioned div.
As you seem to know all the dimensions and positions already, just add another absolutely positioned div to it and put the relative content in it.
I have looked into this and found an alternative by using float:left and clear:left however after using this method on the first div, you cannot position the div correctly as the starting point of the second div is under the first div and not at (0,0). Any ideas of how i can get by this.
You need to remove position: absolute to get the floats right. Just width and height are enough.
Float the three inner divs left, put overflow: hidden; on the playArea div and put your <p> under the three inner divs with clear: both;
After reading the comment thread between you and "BalusC", it appears that you have modified your CSS and are now trying to float your items, and use margin-top and margin-left for positioning. You are totally able to do it that way, but you are forgetting that you can also use negative margins to position your elements as well. For example if you use margin-top:-10px; then it will pull the element up (instead of pushing it down, like a normal positive valued margin). The same goes for all of your other margins.
That seems to be the missing ingredient for you now.
Related
I've been writing CSS for quite some time now.
I've noticed that
<div style="position: relative; right: 20%; bottom: 20%;">some text</div>
never works!
relative positioning would work with left and top specified but not with right/bottom. Why?
A quick fix around this is to use "absolute" instead and specify right/bottom in pixels, but I need a reason.
Also, correct me if I'm wrong. Irrespective of whether the external container is positioned absolutely or relatively, does it not make much sense to position something "relative" to the boundaries of that container or should elements inside a container always be positioned "absolute"?
Thank you.
From Absolute vs. Relative - Explaining CSS Positioning
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
Relative positioning does work with bottom/right values, just not the way you were expecting:
http://cssdesk.com/RX24j
Think about the position values on relative elements as margins, that the surrounding elements simply ignore. The "margins" will always move the element relative to it's previous position in the normal document flow, but remove it from the normal flow at the same time.
When out of the normal document flow, the surrounding elements act as if it were in it's original position in the normal flow... but it's not. This is why a relative element can overlap it's parent (like in Rel 1).
Did you try this?
<div style="position: relative; right: -20%; bottom: -20%;">some text</div>
or rather
<div style="position: relative; right: -80%; bottom: -80%;">some text</div>
not recommended :
left : 0% //will set it to left
left : 100% //will set it to right => you need to get the width of the element and subtract it using calc ( 100% - width)
To people visiting this old post...
if the element that you are trying to position inside something else has a width or height that is larger than the outer element. The position will ignore left, right, bottom, left.
give it width/height auto.
that was the problem that I had. Hope it helps you too!
remove position left, right, top, bottom from the parents element
and put it in the child as you want
.parent_class
{
background: #ff0000 ;
position: absolute;
transition: 0.8s ease-out;
left:0; //" remove this from here"
top:0; // " remove this from here"
z-index: -1;
}
.child_class
{
width: 0px;
height: 70px;
right: 0; //"now it will work"
bottom: 0;//"now it will work"
}
After a couple of waisted hours I've managed to find a solution to my problem, so the question is not "how to", but "why it works like that". Here's my stripped down example:
<div id="header">
<div id="header-element">header</div>
</div>
<div id="footer">footer</div>
CSS:
#header {
width: 100%;
position: relative;
padding-bottom: 5%;
}
#header-element {
position:absolute;
bottom: 0;
}
#footer {
position: relative;
margin-top: 5%;
}
And jsFiddle - http://jsfiddle.net/H7jwm/3/.
My problem was how to position those relatively positioned elements using percentage, first one some % off the top of the document, and the second one from the first one. I've accomplished that by giving padding-bottom to the first one, and margin-top to the second one, but I've got to the solution with a brute force - trying out every remotely logical solution. Now, if you remove the padding, margin-top of the second element becomes margin between that element and the top of the document, not the first element, and that first element "takes" rest of the space to the top.
The question is why that padding works like that? Or, to rephrase it, how does padding work with relative positioning?
Actually, you are mixing positions. Your #header has a height of zero. That's right, zero like in nothing, because it has no relative content. #header-element is absolutely positioned and because #header has a height of 0 it happens to be exactly in the padding-bottom space.
So, if you remove the padding-bottom from #header, the #footer moves up, starting right at the top of the document. Because of the margin-top, there's some space between the document top border and the word 'footer'.
But you still have that absolutely positioned #header-element, which will now be right in that margin-top space.
I'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
I have a div (div1) that has its position, width, height, everything all set, and it is set externally, so I can't know ahead of time what those values are.
Inside and at the top of div1 is another div (div2). I want div2 to float on the right of div1 without affecting the following information in div1.
I can add the attribute position:absolute and get div2 to float and not affect the contents, however, I cannot get it to float on the right, even when applying float:right.
If I understand correctly:
First, apply position: relative to your div1.
As it "won't work" when you have both float: right and position: absolute on your div2, you should replace the float: right rule with right: 0.
try this:
position: absolute;
right: 0;
top: 0;
with just relative positioning?
<div style="height:300px;width:300px;position:relative;background-color:red">
<div style="height:100px;width:100px;position:relative;float:right;background-color:yellow">
</div>
Have you tried placing the other contents of div1 into another div, then setting a specified width on that div while keeping float:right on div2. Sounds like a sidebar style scenario.
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.