How to push a div from the top in percentage with css? - css

I'm trying to make a div inside another div to be placed 70% from the top of the parent div so no matter what the screen size is the inner div should flow up or down to adjust for it (kind of like fluid layouts but vertically). I tried doing the following:
http://jsfiddle.net/uxaVe/
But the padding-top is fixed even though I have it set in percentage, I must be doing something wrong but I'm not sure what it is, could you guys help me out? Thanks in advance!

Remove the padding, and replace with
position:absolute;
top:70%;

Related

When I use transform:rotate on a fixed div it leaves an empty space at the top of the page?

I have a fixed div on with a height of 100% on the left side of my webpage. When I use transform:rotate(6deg); it leaves an empty space at the top of the page. I have tried to add height to it, but it just makes it worse. Any help would be appreciated. Thanks! (:
Is it triangular space left?
After rotating div with 100% height it probably also resizes width of page?
Problem is probably in point of rotation.
Please give more details - somehow this div need to be cut (shifted).

div sync height to its peer on right

I have a container div with three child divs. see attached.
the center div can dynamically stretch in height. what I want is if the container div would stretch with the center div, then the left div will stretch to fit the new container div, and therefore stay in sync with the center div.
any one knows a pure css way to do this?
This doesn't actually adjust the height of the column, but the only non-javascript way to achieve this effect without actual content pushing the height down is using faux columns. You apply a background image to the parent element that mimics the column. Doesn't apply as well to responsive design, but the good folks at A List Apart do a better job of explaining the method here http://www.alistapart.com/articles/fauxcolumns/
yes that makes sense if you have a bottom-border. Let us know if you need help with the javascript. There will be no pure CSS way to accomplish this though. You have to find the height of the center div with javascript, and tell your left div to be the same height.

Div does not adjust to fit height and width of the image

I have a div (div#slideImage) and within a few images.
But this is not div by adjusting the images inside that div.
See the full page.
Note that the size of the div (width: 75px; height: 28px;) is smaller than the size of the image.
I'm using the plugin jquery.cycle
This probably isn't what you were expecting, but can't you just resize the image? It seems to make more sense to me than expecting the div to do the work for you.
If you specify the dimensions of a div, then contained nodes will either be clipped or scrolled depending on the div's overflow property. Your best bet is to set the dimensions of the div to more useful values.

Getting Div to float to bottom of parent div?

Hi I have a simple sidebar inside a div which has height:100% and I need the sidebar to float as high as the container becomes. Since I have a content div, and the content div will change on each page, it's inside this parent div which ideally should change in height and thus the sidebar would run the entire height of this parent div.
http://mibsoftware.us/clients/weber/?page_id=2
However in the above link I'm unable to get that to work. What am I doing wrong here? Any help would be greatly appreciated!
See:
Equal Height Columns with Cross-Browser CSS
Get it to float BELOW the bottom of that div (possibly in a simillar div), and then set it's position to relative and top: -height_of_div px.

CSS - expand div

http://t-webdesign.co.uk/new/
How would i go about getting the grey div (#content_right) to expand to the same size as the left hand side div without using a fixed height attribute?
Thank you
you might want to check the equal height columns technique out:

Resources