I am trying to create a "sticky" navigation on my page where a div gets position:fixed; once the user has scrolled to the element. The functionality is working as expected, but the widths of the two columns that are supposed to stick to the top change once the sticky class is added. I tried adding width:100%; to the CSS of the sticky element, but then the element expands beyond the container.
How can I make sure the column widths stay where they should be when position:fixed; is added?
HMTL:
<div class="container">
<div class="padding"></div>
<div class="anchor"></div>
<div class="row sticky">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</div>
<div class="padding2"></div>
</div>
CSS:
.padding {
height:250px;
}
.padding2 {
height:1000px;
}
.sticky {
background:#000;
height:50px;
line-height:50px;
color:#fff;
font-weight:bold;
}
.sticky.stick {
position:fixed;
top:0;
z-index:10000;
}
JS:
function stickyDiv() {
var top = $(window).scrollTop();
var divTop = $('.anchor').offset().top;
if (top > divTop) {
$('.sticky').addClass('stick');
} else {
$('.sticky').removeClass('stick');
}
}
$(window).scroll(function(){
stickyDiv();
});
stickyDiv();
JSFiddle
Thanks!
Fixed position is relative to body, so it will count the 100% width from body width. If using javascript is ok, you can set the sticky width by getting the container width. Check the Updated Fiddle
You can add a 100% width wrapper around the container and have that stick instead.
<div class="wrap">
<div class="container sticky">
<div class="row">
...
</div>
</div>
</div>
updated fiddle:
https://jsfiddle.net/mileandra/omeegfc7/
add:
width:inherit;
to your .sticky.stick
JSFiddle
like Nanang Mahdaen El-Agun said, a fixed position relates the width to the body. With width:inherit; it will use the width of the .container class
reference: Set width of a "Position: fixed" div relative to parent div
I was able to get it to work by setting your container to "container-fluid" then adding the width: 100%; to your .stick class.
In Bootstrap 4 it's sufficient to add a <div class="sticky-top">...</div> around your row div: https://getbootstrap.com/docs/4.4/utilities/position/
<div class="sticky-top">
<div class="row">
<div class="col-sm-6">
Testing
</div>
<div class="col-sm-6">
Testing
</div>
</div>
</div>
Related
On this website avoirundevis.fr i need to center content like this on this picture : http://www.evernote.com/l/AMM-nvY7omBHtLzs4VFLBhTzw6wkkTS5rjw/
I have trying with this code http://jsfiddle.net/94150148/utxnmr1h/ but i don't know how do this, thanks for help
<div class="row-fluid">
<div class="span6">Fenêtres (PVC, bois, alu)</div>
<div class="span6">Façade (ravalement, enduit,...)</div>
</div>
<div class="row-fluid">
<div class="span6">Construction - Extension</div>
<div class="span6">Sols intérieurs</div>
</div>
Styles baby:
I updated the html/css on your jfiddle: http://jsfiddle.net/utxnmr1h/7/
css:
.container {
text-aling:center;
width:100%;
}
.row-fluid {
width:80%;
margin:auto;
}
html: I added a div outside the ones you provided and named it container.
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>
basically my html code looks like:
<div id="leftbar"></div>
<div id="content"></div>
<div id="rightbar"></div>
how do i code it with css so that the all 3 divs will be side by side and leftbar and rightbar have a fixed width while content will be flexible to fill out the webbrowser.
Try this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
How about this one: http://www.glish.com/css/7.asp
Float the leftbar left, and give content a margin-left value equal to (or greater than) the width of the leftbar. Float the rightbar right, and give content a margin-right value equal to (or greater than) the width of rightbar.
.nav1 { width:200px; float:left; }
.nav2 { width:200px; float:right; }
.content { margin:0 210px; }
.clear { clear:both; }
--
<div id="wrapper">
<div class="nav1">Main Nav Items</div>
<div class="nav2">Other Nav Items</div>
<div class="content">Content goes here</div>
<div class="clear"></div>
</div>
Now css has flexbox model.
You should read the specification to get the flexible layout of webpage
http://www.w3.org/TR/css3-flexbox/