I have a vertical parent container div with fixed positioning and height in pixels. I have child divs with same width as the parent. How do i stack these child divs inside the fixed parent? I am uanble to get through. please help.
If you want to do it statically, just set each child div's top property how you want it.
So if those child divs are 50px in height
#child1{
position:relative;
top:50px;
}
#child2{
position:relative;
top:100px;
}
and so on
They should already be stacked. Could you elaborate on your problem?
HTML
<div id="container">
<div class="stack one"></div>
<div class="stack two"></div>
<div class="stack three"></div>
</div>
CSS
#container {
width: 250px;
}
.stack {
width: 250px; height: 100px;
}
.one { background: red; }
.two { background: green; }
.three { background: orange; }
jsFiddle
Updated -
After reading your reply, I've now updated the CSS - jsFiddle
CSS
#container {
position: relative;
width: 250px; height: 300px;
}
.stack {
position: absolute;
width: 250px; height: 100px;
}
.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }
Related
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
Simple question: I've got two divs, I want them side by side, like this:
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
float: left;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
The question is, can I have the same effect using float in only one if the divs? The specific issue is, the yellow div can contain float: left, the silver div can't. I want to achieve the same effect without using float on the silver div.
How can I achieve it?
Here's a fiddle
Use display:inline-block to achieve what you want.
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:inline-block;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
UPDATED FIDDLE
You can use display: inline-block for the silver div
http://jsfiddle.net/94Lxd5c4/
.details-right {
background: silver;
width: 50%;
display: inline-block;
}
Or you may just define overflow: hidden; or overflow: auto; . The behaviour of the silver div will be the same, whether you add float: left or not (it won't do any difference)
http://jsfiddle.net/ogwvjjs9/2/
.details-right {
background: silver;
width: 50%;
overflow: auto;
}
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
position : absolute;
left : 50%;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
I hope this is what you are looking for
Use display:table and display:table-cell to achieve your need.
I added one more div that will act as a table
< div class="details">
Below div act as a table cell
< div class="details-left">left< /div>
< div class="details-right">right< /div>
<div class="details">
<div class="details-left">left</div>
<div class="details-right">right</div>
</div>
html
.details { display:table; width:100%; overflow:hidden;}
.details-left {
background: yellow;
display:table-cell;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:table-cell;
}
css
demo: http://jsfiddle.net/ravinthranath/skuvnvqL/
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}
I have my HTML structure like this:
<div id="pagewrap">
<div id="header">
</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
I want to increase size of content div when either divs in content div increases as same size as other div.
How can I achieve this?
This is how my css is:
#pagewrap
{
width: 100%;
height: 100%;
}
#header{width: 100%;height:97px;position:relative;}
#left{position:absolute;left:0px;width:20%;background-color:#1C2326;}
#right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;}
#footer{clear:both;height: 80px;background-color:#72D27C;}
If you want the wrapper to be affected by the contents' dimensions, you can't use position: absolute in the inner divs. Try floating them instead (and add overflow: hidden to the container to clear the inner floats):
#pagewrap { width: 100%; height: 100%; }
#content { overflow: hidden; }
#header { width: 100%; height: 97px; position:relative; }
#left { float: left; width: 20%; background-color: #1C2326; }
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; }
#footer { height: 80px; background-color: #72D27C; }
http://jsfiddle.net/h4hbx/
I think maybe this fiddle is closer to what you had in mind. You can let the left div (static position, no float) set the height of content, and then pin the top and bottom of the right div to the content div. As left grows, content grows, and right is tied to content, giving you the effect you want. However, this is asymmetrical -- if you want either div to cause the other to follow it, that's another problem.
CSS:
html, body {
height: 100%;
}
#pagewrap {
width: 100%;
height: 100%;
}
#content {
position: relative;
}
#header {
width: 100%;
height:97px;
}
#left {
left:0px;
width:20%;
background-color:#1C2326;
color: #fff;
top: 0;
}
#right {
position:absolute;
right:0px;
width:80%;
background-color:#2D3538;
color:#fff;
bottom: 0;
top: 0;
}
#footer {
clear:both;
height: 80px;
background-color:#72D27C;
}
http://jsfiddle.net/cxwQF/12/.
Note: Red and green boxes should intersect. Green box is image or video. When hover it became yellow. But not on the bottom where the red box starts. Red box is control (for example, next image).
Question. How can I put parent div behind the image and child div to the top.
Markup:
<div id='image'></div>
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#image {
position: relative;
width: 100%;
height: 500px;
background: green;
z-index: 2;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
/*#parent:hover {
background: blue;
} */
#child {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: red;
z-index: 3;
}
How does this suit you? It's hard to know how to structure it without knowing what you are trying to achieve.
http://jsfiddle.net/cxwQF/21/
I've created another, invisible div for your 'child' but the original (foot) remains in the same place.
<div id='image'></div>
<div id='foot'>
</div>
<div id='parent'>
<div id='child'></div>
</div>
Sorry about the border styles its purely for test purposes.
I found the pure CSS solution. Markup remains the same.
CSS:
#image {
width: 100%;
height: 500px;
background: green;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
visibility: hidden;
}
#child:hover {
background: pink;
}
#child {
margin: 0 auto;
visibility: visible;
width: 100px;
height: 100px;
background: red;
}
Solution: #parent's "visibility" should be set to "hidden", #child's "visibility" should be set to "visible"
Fiddle is here: http://jsfiddle.net/cxwQF/22/