i do have 1 parent div and 2 child div, i want to these 2 child div will be equal to its parent height or whenever the content of 1 child div expand the other child div will expand as well. I like to use % instead of px so that when you zoom it in or out the height size stay the same or if any of you guys know some tricks to work for it i will appreciate it here's my js fiddle http://jsfiddle.net/deftmagic/29Puw/4/
<div class="content-wrapper">
<div class="task-pane">
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
<div class="tbl-div">
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
</div>
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
}
.task-pane{
background:red;
height:100%;
width:20%;
float:left;
}
.tbl-div {
background:green;
height:100%;
width:80%;
float:right;
}
note: guys i already search some of this same problem and it occur some do use table but my conflict to it is when i use table tag it can't provide to add div tag inside that i needed the most so please if there's any solution instead of table maybe some script i'll appreciate it-- thanks ^^
I've had to do this multiple times and have several tricks to pull this off, and vary depending on case. For this instance, I'd make the parent relative in size, the smaller child absolute, and the other one default so it'll cause the container to size it self.
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
position: relative;
}
.task-pane{
background:red;
width:20%;
position: absolute;
top: 0; bottom: 0;
}
.tbl-div {
background:green;
width:80%;
float:right;
}
Updated fiddle: http://jsfiddle.net/29Puw/9/
.content-wrapper {
background:#000;
overflow:hidden;
position: relative;
}
.task-pane {
background:red;
min-height: 100%;
width: 20%;
left: 0px;
position: absolute;
}
And the updated fiddle.
Related
I have two divs whitch the div child is inside of the div parent. The div child is bigger that his parent. So I decide to put a scroll in the div parent for i can see better the content of the div child.
The problem is that now I need to use the property clip in the parent div, but the clip also affects the scroll.
What I would like to ask if there is any way that I could clip the parent div and the scroll size ajdustes automaclty to the scroll.
Follows my code:
.outter{
width:100px;
height:100px;
background-color:blue;
overflow: scroll;
position: absolute;
clip: rect(23.75px 120px 120px 23.75px);
}
.inner{
width:200px;
height:200px;
background-color:red;
}
<div class="outter">
<div class="inner"></div>
</div>
[EDIT]:
Follows thee result that i pretend.
If you campare the image above and the result of the snippet that I put above is that in the result the scrolls apears cut and the image is not
That is what the clip property is supposed to do, restrict the visible area of an element. If you are trying to clip the contents of the inner element, you can absolutely position it to do so.
Hope this helps!
.outter {
position: relative;
width:160px;
height:160px;
background-color:red;
overflow: scroll;
}
.inner{
position: absolute;
left: -40px;
top: -40px;
background:url('http://placekitten.com/g/400/400');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width:400px;
height:400px;
}
<div class="outter">
<div class="inner">
</div>
</div>
I have Two Div, class name .div1 & .div2 with width:20%; each. Inside .div1 I have a another div name .bar
This .bar div is positioned left 100% absolute. I am trying to make the End point of .bar div and End point of .div2 should remain in same point in different screen like this Image below:
You can see that End point of Green Bar(.bar) and Gay Div(.div2) are in Line. But if I increase or decrease the size of the screen they don't remain in line. I have tied many ways but not worked. Is this possible with only CSS ? or Need any jQuery help ? If need any jQuery can anyone help me how to do that ? because I am not good with jQuery.
Here is the HTML:
<div class="div1">
<div class="bar"></div>
</div>
<div class="div2">
</div>
This is CSS that I have used:
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:green;
position:absolute;
height:20px;
left:100%;
top:0px;
width:114%;
z-index:10;
}
Thanks in advance. FIDDLE
FIDDLE
I want to show a div which background is transparent, and the transparency is not affect on the top of the particular div. so i use the following html and css.
<div id="content">
<div id="transparncy"></div>
<div id="contentdata">
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
Css
#content {
width:100%;
position:relative;
color:#37475e;
}
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#contentdata {
position:relative;
width:100%;
}
#left {
width:50%;
float:left;
}
#right {
float:right;
width:35%;
}
My problem is that when i add more data in #contentdata , i can adjust the height of #transparncy proportional to that (cant increase the background transparent div). How can i solve this problem. Please help me
Instead of giving new blank div to transparency, add the same class name to id="contentdata" div and make background: rgba( 255, 0, 0, 0.4); this will not apply transparency to text but only for bg
HTML
<div id="contentdata" class="transparncy">...</div>
CSS
#contentdata .transparncy {
background: rgba( 255, 0, 0, 0.4);
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
}
DEMO
Correct answer updated Fiddle (http://jsfiddle.net/JyZ67/8/)
The main problem is you use the <div id="transparncy"></div> not properly
<div id="transparncy">
contentdatas....
</div>
This issue can be solved by adding bottom:0 to the #transparncy part of the CSS.
The problem is quite simple and relevant to ask
You have used min-height : 250px;
no matter what the height of inner/child conteht or div is parent div with min-height in your case #content #transparncy will take minimum height of 250px
just remove min-height and i will work as height auto :)
updated code :
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
http://jsbin.com/iGIToRuV/1/edit
I'm working on a WYSIWYG website designer as an experiment for a variety of reasons. (The plan is to make this desktop and mobile friendly)
One issue I'm having is getting the div#canvas to be 100% via width and height. In addition I don't even see the div#canvas on Firefox either, and unsure as to why that is.
Let me elaborate...
My div#canvas is positioned where I want it. My div.options is positioned on the right:0; and it's width is 291px. I want to tell my div#canvas to fill the page width so it covers the body, but doesn't exceed past it.
I explained the best I could, but to understand more visually, here's a design prototype I made for this post.
The HTML:
<body>
<header class="header">Links</header>
<div class="toolbox">Tools</div>
<div class="content" id="canvas"></div>
<div class="options">Options</div>
</body>
The CSS:
/* Canvas */
#canvas {
position:absolute;
top:81px; left:44px;
width:100%; height:100%;
}
.header {
position:absolute;
top:0; left:0;
width:100%; height:81px;
}
.toolbox, .options {
position:absolute;
top:81px; height:100%;
}
.toolbox { left:0; width:44px; }
.options { right:0; width:291px; }
You can specify all the four dimensions and it will stretch your canvas:
#canvas {
position: absolute;
top: 81px; left:44px; right: 291px; bottom: 0;
}
I browsed the same question in SO, and none of them worked well [Cross Browser compatible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>
I believe you want sticky footer after all.
jsfiddle demo
It uses this sticky footer.
Basic idea is to use that sticky footer or basically any Sticky footer and then color your #wrap, because it will cover the whole viewport vertically
Set height of body and html to 100%, then create a wrapper for the entire body that has position: relative and height:100%, when you have the element inside this wrapper it will align to the bottom.
<html
<body>
<div id="body-wrapper">
<div id="bottom"></div>
</div>
</body>
</html>
With CSS:
body, html {
height:100%;
}
#body-wrapper {
height:100%;
position:relative;
}
#bottom {
position:absolute;
bottom:0px;
left:0px;
}
Here is what happens without a wrapper: http://jsfiddle.net/Cj4c2/1/
And here it is with a wrapper: http://jsfiddle.net/CPSt6/
You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;
Please refer to the css document:
An element with fixed position is positioned relative to the browser window.
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is
src: http://www.w3schools.com/css/css_positioning.asp
so you should use position:absolute.