example:
<div id="parent">
<div id="top">
</div>
<div id="mid">
</div>
</div>
http://jsfiddle.net/VTNxe/
i want the green div to be under the yellow one, and his height should be always that high to exactly fill the parent div.
exampke: parent-height:300 & yellow height:100 => green-height:200
or : parent-height:350 & yellow height:50 => green-height:300
this should even be if the yellows or the green height is changed dureing runtime with javascript for example.
is it possible to archieve this only with css?
thx
If you want to stick with pixels, I think this is the closest you can get with only css:
#mid{
position:absolute;
background:green;
width:100%;
top:100px;
bottom:0px;
}
http://jsfiddle.net/Pevara/VTNxe/4/
Note that I set the top property the same as the height of the #top div. This means that the height of #top has to be fixed. As you state in your question, you might want to change this height with javascript or something. Perhaps you could consider changing the top at the same time then?
http://jsfiddle.net/VTNxe/1/
Play a bit around with position:absolute;: the #top div is always fixed size at the same place. and then use a height: 100% for the #mid div.
#parent{
position:relative;
border: 1px solid red;
height: 300px;
width: 200px;
}
#top{
position:absolute;
background:yellow;
height: 100px;
width:100%;
top:0px;
bottom:0px;
z-index: 1; /* necessary, else the #mid would lay over it */
}
#mid{
background:green;
width:100%;
height: 100%;
}
The short answer to your question is yes, it is possible to do with just CSS. One way might be to make the green box with a height:100%; and do overflow:hidden; in the parent div. Then changing the height of the yellow will make it look like they vary proportionally.
Related
This is my first question so I'll try my best to get my point across as coherently as I can.
Lets assume something like:
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
What I'm asking is is there a way to "link/lock" #child2 width to #child1's width or #parent's so that #child2 never exceeds #child1's width.
Is there anyway, using only CSS, I can force #child2 (or #parent) to have the same width as #child1, without fixing #parent's and #child1's width?
The point is that I want to be able to edit the contents on the fly (like translations) of both #child1 and #child2 but as #child2 will always have more words it will always be wider.
PS: Don't forget, using only CSS, no JavaScript.
Edit: Done a fiddle https://jsfiddle.net/ricardojcmarques/seckdugj/5/
Basically what I need is the green box to be the same width as the orange box, without giving the orange box (nor the brown) any width. Using the width the browser needed to render it correctly.
So just Improvised on your suggestion, the key here is to set
#parent{
background: brown;
position: absolute;
left: 0;
height: 0;
margin: 0;
padding: 0;
}
Heres is a working JSfiddle
DEMO
A little bit of a hack but it might work.
<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>
#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}
EDIT
Have a look at this one, it's a little closer to yours but I have to modify the list in order to nest child2. I don't know if you have a specific style you need to set to the parent div but if you do it will take some more thought.
Demo2
I have a "fixed" DIV on the very top of my page:
<div id="banner-wrapper">
<div id="banner"></div>
</div>
with the following CSS:
#banner-wrapper {
width:300px;
height:500px;
}
#banner {
width:300px;
height:500px;
position:fixed;
top:0;
left:0;
background:orange;
}
This "fixed" DIV is followed by a "content-wrapper" DIV:
<div id="content-wrapper">
<div id="content-left">
content left
</div>
<div id="content-right">
content right or sidebar
</div>
</div>
with the following CSS:
#content-wrapper {
width:300px;
background:red;
position:absolute;
top:500px;
bottom:0;
}
#content-left {
width:150px;
float:left;
}
#content-right {
width:150px;
float:right;
}
The issue I'm having is that the "content-wrapper" DIV does not fully cover the "fixed" DIV. The top of the "content-wrapper" covers the "fixed" DIV and the bottom of "content-wrapper" becomes transparent, showing the "fixed" DIV beneath.
I was able to solve the problem by giving the "body" a height in CSS. However, I do not want to give the "body" a height as I do not know the true hight of the content and would like it to remain flexible. I've also have tried inserting
<div style="clear:both;"></div>
before the closing tags but it does not force the "content-wrapper" down.
Here is an example of the issue on JSFiddle.
As you can see, the "red" box does not reach the "blue" box even though it is set to absolute, bottom 0. From what I can tell it reaches the bottom if it does not contain any DIVs inside of it. But once I add the "content-x" DIVs, it no longer reaches the bottom of the page.
Thank you for any help.
You could relatively position the element #content-wrapper rather than absolutely positioning it. Then you can omit the top/bottom positioning and it will behave as expected.
The reason it wasn't working in the first place was because you were giving the absolutely positioned element a height of 100%. Therefore it will have the same height is the window, which is not what you wanted.
Updated Example
Change the following:
#content-wrapper {
width: 300px;
height: 100%;
background: red;
position: absolute;
top: 500px;
bottom: 0;
}
to:
#content-wrapper {
width: 300px;
background: red;
position: relative;
}
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
Say I have three divs:
<div id="outer"></div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
#one {
position:fixed;
top:0px;
left:0px;
}
#two {
width: 80%;
height:500px;
}
#three {
width: 80%;
height:500px;
}
Divs "two" and "three" appear to be overlapped by div "one" because of position fixed.
1) What is the best way to make it such that they do not overlap?
2) What is the best way to make it such that my fixed div takes up 100% of the height, even if the user scrolls down? (like a sidebar, preventing any new divs that i want to run along the same side as divs two and three) Does the best way involve floats for #two and #three?
By changing the position from position: fixed; to position: sticky; solved my problem.
#one{
position: sticky;
}
1:
By adding margin-left you can make sure that long fixed div doesn't overlap the others.
#two, #three {
margin-left:20%;
width:80%;
height:500px;
}
2:
Adding the bottom:0px; makes it the height of the window because it expands from the top to the bottom.
#one {
position:fixed;
top:0px;
bottom:0px;
left:0px;
width:20%;
}
Note: I also added a flexible width of 20% to the #one div so that it plays nicely with the other two flexible width divs.
Fiddle: http://jsfiddle.net/ZPRLd/
You can use the CSS z-index property. It worked fine on me!
#one{
z-index:0
}
#two, #three{
z-index: 1;
}
Since the z index of #two and #three are higher than #one, they will be on top when there is an overlapping. You may select any other integer values, as long as one index is higher than another.
There is no way for this to be fixed, so all we can do is wait for now...
Thank me later
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.