I'm trying to figure how the sticky position works with three elements within the same div. My problem is that the composition is working only on the bottom of the scroll and during the scroll, but not on top. How can I have the block start from the same composition as it is while scrolling and on the bottom?
The idea is the block of the three elements to always have the following composition and move together within the parent div #main:
White with height of 100px
25px gap
Green with height of 40px
0px gap
Red with height of 30px
#main {
background: #ccc;
height: 1000px;
padding:100px;
}
#one,#two,#three {
position:sticky;
}
#one{
height: 100px;
background: white;
top:150px;
margin-bottom: 95px;
/*padding-bottom: 115px;
margin-top:-150px;*/
}
#two{
height:40px;
background: green;
top:275px;
margin-bottom: 30px;
/*padding-bottom: 50px;
margin-top:-275px;*/
}
#three{
height:30px;
background: red;
top:315px;
/*padding-bottom: 20px;
margin-top:-315px; */
}
#main-after, #main-before {
background: black;
height: 500px;
}
<div id="main-before">
</div>
<div id="main">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
<div id="main-after">
</div>
Thank you for your help!
The solution is to sticky the #main and not the separate divs, so they behave as a block!
Related
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
I want to fill the sides of a centered div with another div or span on each side.
I'm using margining to center the div as shown in this fiddle.
HTML
<div id='A>
<div id='Ad'>
</div>
</div>
CSS
#A{
z-index: 3000;
position: fixed;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.05);
}
/*
div or span to the left
*/
/*
centered div
*/
#Ad{
z-index: 3000;
width: 400px;
height: 40px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
/*
div or span to the right
*/
How can I have a div that always takes up the remaining space on the left and another div that takes up the remaining space on the right.
Clarification:
Center column needs to be constant width. Left and Right Columns vary with the window size.
This would achieve what you want - it allows you to have a fixed width central div with left and right columns that fill up the remaining space:
HTML:
<div id="A">
<div id="Ad">Centre</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS:
#A {
z-index: 3000;
position: fixed;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
#Ad {
z-index: 3000;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
#left, #right {
position:absolute;
left:0;
top:0;
right:50%;
margin-right:200px;
background:#F00;
height: 400px;
}
#right {
left:50%;
right:0;
margin-left:200px;
margin-right:0;
}
The key is that the margin on the left/right is half of the central column's total width, so adjust it to take into account any borders or padding.
Working example: http://jsfiddle.net/2AztF/
I would just use 3 <div>s floated within the main container
HTML:
<div id='A'>
<div id='AdLeft'></div>
<div id='Ad'></div>
<div id='AdRight'></div>
</div>
CSS:
#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }
Here is a modified jsfiddle.
Make 3 divs :
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>
CSS:
#A,#B,#C{
float:left;
width:10%;
}
#B{
width:80%;
}
Here, B is you main div.
It is good practice to clear when you use float property.
To fill space on the right and left side of your div code use and make sure you have no margin or padding on those sides.
float:right;
float:left;
HTML:
<div class='container'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }
The margin-right of .center will fill the space accordingly.
<style type=text/css">
#container {
height:30px;
width:100%;
}
.left.button {
float:left;
width:60px;
}
.right.button {
float:right;
width:60px;
}
.middle.indicators {
height:30px;
}
.middle div{
display: inline-block;
margin: 10px 2px;
}
.circle {
background: rgb(102,102,102);
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
}
</style>
I have 3 divs in a container. I want to push the left button div left and the right button div right and have the middle indicators div in the center. The issue is the middle div needs to be dynamic width since the number of circle divs inside changes dynamically based on other variables. There could be 3 circles or 5 or 10. I need the middle div to stay centered and also be able to expand based on the number of circle divs inside.
<div id="container">
<div class="left button"></div>
<div class="middle indicators">
<div class="circle></div>
<div class="circle></div>
<div class="circle></div>
</div>
<div class="right button"></div>
</div>
I would change the CSS a little to get things like this jsFiddle example (div borders added to make visualizing them easier). By giving the middle indicators div a left and right margin slightly larger than the width of the left and right button divs, you allow it to float up between the two and take up as much space as possible.
CSS:
div {
border: 1px solid #999;
}
#container {
height: 30px;
width: 100%;
}
.left.button {
float: left;
width: 60px;
}
.right.button {
float: right;
width: 60px;
}
.middle.indicators {
height: 30px;
text-align:center;
}
.middle {
margin: 0 70px;
}
.circle {
background: #666;
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
display: inline-block;
}
I'm trying to create a layout where I have three equal-wdith columns (33% width each). However, I want a 15px margin on either side of the middle column.
Please see this jsbin example I've created: http://jsbin.com/usiduy/edit
How can I get the blue column to sit on the right?
Try this css:
body { margin: 0; padding: 0}
#container {
position: absolute;
top: 30px; left: 50px;
bottom: 30px; right: 50px;
border: 1px solid #ccc
}
#container > div {
width: 33%;
height: 100%;
float: left;
}
#container div div {
height:100%;
}
#container div div.a {
background: red;
}
#container div div.b {
background: green; margin:0 15px;
}
#container div div.c {
background: blue;
}
using this HTML:
<div id="container">
<div><div class="a">First</div></div>
<div><div class="b">Second</div></div>
<div><div class="c">Third</div></div>
</div>
If you mean three equal width table columns in sum, you can create a table with three columns, then set padding-left: 15px and padding-right: 15px in the middle column (in td).
You can do like this:
CSS:
.item.first { background: red;width: 33%;float:left; margin-right:15px}
.item.middle { background: green; overflow:hidden;}
.item.last { background: blue;width: 33%;float:right;margin-left:15px}
HTML:
<div id="container">
<div class="item first"></div>
<div class="item last"></div>
<div class="item middle"></div>
</div>
Check live example
http://jsbin.com/usiduy/4/edit#html
Updated:
http://jsbin.com/usiduy/6/edit#html
Because you are mixing fixed pixel widths with percentages, you need to calculate the 33% of the page width minus the 30px of margins on the fly.
This is a JavaScript solution, so a JavaScript savvy contributor should be able to help you out :)
I'm trying to put two blocks into one fixed-height block to create the following layout:
------------------------
UL (initial height=0),
grows on element add until maximum height reached
scroll should be added after max height is reached
------------------------
DIV (initial height=100% of parent)
decreases until min height is reached
------------------------
HTML part of the layout:
<div style="height:100px">
<ul style="max-height:70px;height:auto;overflow:auto"></ul>
<div style="min-height:30px;height:auto">
<span>TEST CONTENT</span>
</div>
</div>
You really can't do this cleanly with just CSS. I'd suggest using a bit of jQuery for this where you just query the height of both at any given time, figure out which is taller, and then set the other element to match
I'm not sure that the DIV's properties are entirely clear. Note, this is not an answer (yet), just too long to put into a comment.
<div id="container">
<div id="list">
<ul></ul>
</div>
<div id="content">
<span>TEST CONTENT</span>
</div>
</div>
#container {
height: 100px;
background: grey;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
min-height: 30px;
height: auto;
background: #fdf;
}
// For testing
setInterval(function(){
$('ul').append('<li>Test</li>');
},3000);
http://jsfiddle.net/V8yuN/
Now, if you want the DIV#content to at first take up the entire height, but then shrink as the DIV#list UL grows, what is it you're trying to accomplish with DIV#content? Note, I put the UL within a DIV.
Now, the above fiddle demonstrates in a way what you're describing (the DIV#content gets pushed to the bottom). The question I have is, what does the height of the DIV#content matter in your design?
EDIT
Note, if you make the #container overflow: hidden and make the #content's height: 100%, it would appear as if the #container is shrinking.
#container {
height: 100px;
background: grey;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
height: 100%;
background: #fdf;
}
http://jsfiddle.net/V8yuN/2
I have no idea, though, if that would cause your design to break, if the #content's actual content needs to display (for instance, if it is changed dynamically).
EDIT 2
The following accomplishes everything but the vertical-align of the #content text:
HTML
<div id="container">
<div id="push">
<div id="list">
<ul></ul>
</div>
<div id="content">
<div class="border-top"></div>
<div id="content-inner">
<span>TEST CONTENT</span>
</div>
</div>
</div>
<div class="border-bottom"></div>
</div>
CSS
#container {
height: 100px;
background: grey;
}
#push {
height: 95px;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content-inner {
min-height: 100px;
background: #dfd;
margin: 0;
border-left: 5px solid #fdf;
border-right: 5px solid #fdf;
}
.border-top {
background: #fdf;
border-radius: 5px 5px 0 0;
height: 5px;
}
.border-bottom {
background: #fdf;
border-radius: 0 0 5px 5px;
height: 5px;
}
http://jsfiddle.net/V8yuN/6/
Let's say your html looks like this:
<div id="wrap">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
then your CSS could look like this, with #wrap height set, and a min-height for the bottom.
Mind the height 100% !important.
#wrap{
height: 400px;
background: #ccc;
}
#top{
//height: 200px; for testing
background: #f0f;
}
#bottom{
height: 100% !important;
min-height: 200px;
overflow: scroll;
background: #000;
}
is that kind of what you're searching for?
Would help though if you could post the stuff you've already done.