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.
Related
I am having a CSS issue; See the attached image.
there have two fixed div.. where i will put my navigation and yellow area is my content area. content area will be scroll if content big..
but now problem i am facing content area position not fit properly. when i make other two div position: fixed then issue coming. please see my code and jsfiddle..
.midarea this div position not properly fit there. if you see jsfiddle then can under properly..
JSFiddle
You need .midarea to be fixed to match the others:
.midarea {
position: fixed;
left:260px;
right: 0;
height: 100%;
overflow: auto;
...
}
With this your float and width are obsolete (but you can have them if you really want).
Also please, please lose every z-index and every float with a position: fixed or position: absolute.
Visualize
position:fixed is absolutely OK.
Just calculate the sum of width of both fixed nav-colums and set a padding-left with this calculated width to the div.midarea. So all divs inside the midarea begin right of the fixed colums.
And a z-index higher of the content is needed. e.g. z-index:999;
I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)
how do I setup this correctly?
First Understand Positioning:
Fixed Positioning OR [ position:fixed ]
An element with fixed position is positioned relative to the browser window.
Relative Positioning OR [ position:relative ]
A relative positioned element is positioned relative to its normal position.
Absolute Positioning OR [ position:absolute ]
An absolute position element is positioned relative to the first parent element that has a position other than static.
So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed
Reference Link
From reading your question I assume you have something like this:
<div class="sidebar">
<div class="fixed" style="position: fixed;"></div>
</div>
Unfortunately as you probably know by now, top, left, right or bottom will always act relative to the browser window on positon: fixed elements.
The solution is wrapping your .fixed div with another div, and do all the positioning you have to do on that same wrapper and not on the .fixed div. Let me demonstrate:
The HTML:
<div class="sidebar">
<div class="helper">
<div class="fixed"></div>
</div>
</div>
The CSS:
.sidebar {
position: relative;
}
.helper {
position: absolute;
top: XYZ; left: ZYX; /*where XYZ and ZYX would
be the values you were
trying before to give to .fixed*/
}
.fixed {
position: fixed;
}
See it in action in this fiddle: http://jsfiddle.net/joplomacedo/T2PL5/
Make the parent position: relative then its children will use that as their reference for absolute positioning. For details see the Definition of "containing block" in the CSS 2 specs.
About fixed positioning: how can anything be fixed (which means fixed to the viewport) but still be relative to some other element, which in turn is not fixed to the viewport? This seems a contradiction to me, which is the reason why I first misunderstood your question.
This plugin is exactly what you need
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.
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.