I have the following.
If u see, the "asdasdasd" text is not near the top of the div.
I have a div with two divs inside
<div id="widget">
<div id="header"> </div>
<div id="content"> </div>
</div>
The header div have a fixed height, and this background image.
If you see what is in red, that part of the background make me need the div to be bigger, but it moves the content div down.
I tried to pull it up using margin-bottom: -Ypx; but I think its a ugly fix. I can't find something that works for me.
somebody can help (:?
Yeah you can use the position:absolute to keep out the div header you need this properties:
#widget {
position:relative;
}
Make the parent relative, that way the position absolute of the header will be relative to this container
#header {
position:absolute;
top:0;
left:0;
}
Position absolute to the top ande left of his container
Related
I am trying to stack two divs A and B.
Div A - will be scrollable but its height needs to be determined by the div underneath it, Div B so if the content in Div B changes, and it's height changes the height of Div A also changes.
Div B - needs to be aligned to the bottom of page on top of a absolute positioned footer. Its content needs to be aligned to the bottom.
I've tried using position relative and float by wrapping these divs in a wrapper, but the whole thing breaks when I try to keep the Div B aligned or positioned absolutely above the footer.
I've got a feeling this needs to go back to basics, any help would be greatly appreciated
thanks
Here's a basic example. I think I have correctly understood your requirement. This example has them appear to be stacked but in the HTML they are not actually stacked, they are nested. I wasn't sure if you could allow that in your solution but fingers crossed.
Example: http://jsfiddle.net/jyR2A/1/
CSS:
#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}
HTML:
<div id="divB">
<!-- Div A is nested so we can use divB's height -->
<div id="divA">
</div>
<!-- Div B content -->
<div id="divBinnerContent">
Line 1 <br />
Line 2 <br />
..Keep adding more lines to test how it works <br />
</div>
</div>
How it works:
divB is the parent element defining the height of divA. So if we set divB position relative or absolute and place divA inside then we can set divA's height to 100% to give it the height of parent element divB.
Now to position divA we make sure it has position:absolute and set top:-100% which will move it up the same distance as the height of its container divB. Position absolute not only allows us to position it correctly but it also removes it from affecting the height of its parent, divB.
And the content for divB I have made a nice container for it but it is not neccessary. Simply put it anywhere inside divB (but not inside divA) and it will be OK.
You can use the content to define the height,as I have, or use an absolute height set in CSS.
Hope this is what you were after.
Le-roy
I managed to achieve this with help from this question and fiddle.
Stack div elements in css vertically (with dynamic height)
http://jsfiddle.net/nCrEc/334/
Essentially the answer was giving my Div A a height without using the height parameter but instead using absolute positioning on top and bottom. Which meant changes to Div B changed the location of the Div A's bottom (oo er) which pushed the middle div up whenever another populates the bottom area.
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
then using this CSS
.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}
I would like to add lis in a DIV. This DIV as a frame for the fieldset has no width and no height. The size should automatically be sized by using padding. The problem is that the DIV is an element of a class of another DIV:
<div class="flag">
<div id="drop_up">
<fieldset>
<ul>
<li>
some content
</li>
</ul>
</fieldset>
</div>
</div>
Okay, the li's will be inserted automatically through a loop.
Now the problem is, that the DIV is a drop-up frame. The size of that grows upwards and not downwands as usual. So I can not position this by using left, bottom etc. because the height will be different depending from the numbers of li's.
My question is if there is a way to position an element by lower left hand-side corner? Usually the positioning takes effect on the upper right hand-side corner what would be no problem when the DIV is growing downwards.
If there is someone who can help me out I really would appreciate.
Thanks alot.
if I understand what you are trying to achieve you want the bottom of the 'drop_up' divs to always be attached to the top of their parent 'flag' divs, i.e. no matter how much content is in either 'flag' or 'drop_up'.
Assuming my understanding is correct I would suggest wrapping the 'drop_up' divs inside another div (which I will call 'drop_upHolder') and then absolute position this new div to the top of the 'flag' div and then absolute position the bottom of the 'drop_up' div this holder div.
e.g.
<div class="flag">
<div id="drop_upHolder">
<div id="drop_up">
....
....
</div>
</div>
</div>
.flag #drop_upHolder {
position:absolute;
z-index:0;
top:0;
height:0
}
.flag #drop_up {
position: absolute;
z-index: 1;
background-color: gray;
padding: 25px;
bottom:0;
}
I hope this helps.
Here's an Illustration of what I need.
On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?
This interface should accomplish what your mockup shows. Thanks.
http://jsfiddle.net/9tV4y/2/
I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,
.horizontal_scroll{
float:left;
overflow:auto;
white-space: nowrap;
width : 500px;
height : 500px;
}
and applied to the div,
<div class="horizontal_scroll"> ... </div>
Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.
Here's the jsFiddle Demo.
HTML
<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>
CSS
<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>
Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.
I have two divs I want to place one inside the other. The parent div has height 100% and is x-scrollable (the content will overflow to the right).
The child div has a repeatable background image set through css.
I want to place it at the bottom of the parent div (above the scrollbar), like a footer but when the scroll is moved this div should stay still.
How can this be done?
Right now I have
.parent{
overflow-x:scroll;
overflow-y:hidden;
width:100%;
height:100%;
position:fixed; }
.child{
height:33px;
width:100%;
bottom:0;
left:0;
background-image:url(<image_path>);
background-repeat:repeat-x;
position:absolute;}
<div class="parent">
<div class="child">
</div>
</div>
The problem I'm having is that the child div moves when scrolling the parent div.
Thanks.
You don't really need the child div unless there's some other content there in addition to the background image. You could do it all in the parent div.
JSBin Demo -------> HERE
After your fiddle... an edit... Forget the background of the child div. Place the background image on the parent div. let the child div be transparent and contain the text.
Updated Fiddle --------> HERE
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}