I have been struggling with this problem for over 2 hours,
Is there a way to make a div fixed while it is inside a bigger div.
When I scroll I want to keep the right part not scrolling.
So my question is, is there a way to do this without jquery?
Thanks
You have to position the inner div absolutely:
.outerDiv {
position: relative;
/* give it some height */
}
.contentDiv {
height: 100%;
overflow: auto;
}
.innerDiv {
position: absolute;
right: 0;
left: 50%;
top: 0; bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/wSxss/
Adjust the positioning values according to your needs.
This fiddle demonstrates the following solution:
HTML
<div class="wrapper">
<div class="scroller></div>
<div class="fixed"></div>
</div>
CSS (example of key parts)
.wrapper {
position: relative;
height: 40px;
overflow: hidden;
}
.scroller {
padding-right: 200px;
height: 100%;
overflow: auto;
}
.fixed {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 160px; /* .scroller padding minus the right offset to accomodate scroll bar and minus any real separation between it and the scroller */
}
Related
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
This is an odd one. I have a fixed nav bar to the top of the page with
.headerbar {
width: 100%;
position: fixed;
z-index: 110;
top: 0;
left: 0;
background:#FFF;
}
I also have a html5 video on the page acting as a background video for a div its css is the following
video {
display: inline-block;
vertical-align: baseline;
position: absolute;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
The issue is that when I scroll the page my fixed header moves about 15px and then wont move, but If I give the video a positive z-index everything works fine although the video is not a background then.
This is very strange I have never come across this, any ideas ? anyone ?
I'm using Bootstrap and WordPress.
I've been researching how to horizontally and vertically align an image inside a div (classic problem, apparently). I used the answer to this question to vertically align my image: How to vertically align an image inside div
Now I need to horizontally align it. I know to do that, you normally add margin: 0 auto;
The problem is that the method that I followed uses margin:auto; and it undos the vertical align if I change it to margin:0 auto;
I started to make a JSFiddle of the problem, but I couldn't replicate it. So I think it's something in Bootstrap that is overriding it, but I'm not sure what.
Here is the basic code I'm using from the vertical align solution on the other stackoverflow question:
HTML
<div class="crop-featured-2">
<img src="image.png">
</div>
CSS
.container {
position: relative;
width: 100%;
overflow: hidden;
}
.crop-featured-2 {
height: 100px;
width: 200px;
position: relative;
border: 1px solid red;
padding: 5px;
display:block;
}
.crop-featured-2 img {
min-height: 100px;
width:100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:0px;
padding:0;
}
You can see the problem at http://ucaftercruz.com/upcoming/?page_id=30. It's the slider at the top and the problem is in the .carousel-inner div. Resize the browser to around 800px wide to be able to really see the issue.
Thanks so much in advance!
I had a look at your web page. I think the issue solves it self if you just remove the width rule from this selector:
.crop-featured-2 {
height: 320px;
width: 575px;
position: relative;
}
instead use
.crop-featured-2 {
height: 320px;
position: relative;
}
Try this
.crop-featured-2 {
position: relative;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:
http://abezieleniec.com/SIDWeb/
You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS...
Any ideas are welcome!
Thanks
It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/
The key is to use :before with "margin-top: xx%":
.element:before {
margin-top: 50%;
position: relative;
content: "";
display: block;
}
From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)
<div id="home" class="jumbotrontop animated fadeIn">
<div class="biglogo" style="opacity: 1;">
<img src="images/biglogofull.png">
</div>
</div>
Using the code idea above:
#home:before {
margin-top: 55%;
position: relative;
content: "";
display: block;
}
But for this to work you need some amended CSS code for other elements...
.jumbotrontop {
font-size: 21px;
height: 100%;
line-height: 2.1428571435;
color: inherit;
width: 100%;
background-size: cover;
z-index: 1;
}
.biglogo {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 130px;
opacity: 1;
position: absolute;
z-index: 100;
top: 0;
position: relative;
display: table;
}
.jumbotrontop img {
width: 100%;
height: auto;
margin: auto;
max-width: 740px;
display: block;
}
#home:after {
background-color: #eeeeee;
background-image: url(../images/background1.jpg);
display: block;
position: fixed;
top: 0;
left: 0;
content: "";
bottom: 0;
right: 0;
z-index: 1;
background-size: cover;
}
What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.
Hope this helps! No JS, all CSS.
I am trying to create a JS web app with tabs. The speciality of the interface is that the tabs should be as high as the window is and the content should be scrolled if higher than the window. The content is built up from several left floated panels that fill the screen.
I already have part of the solution working but I cannot figure out how to set the 100% height and the scrolling for the container.
http://jsfiddle.net/KhwZS/1242/
<div class="tabs">
<ul>
<li>Tab1</li>
</ul>
<div id="tab1">
<div class="container clearfix">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
</div>
http://jsfiddle.net/KhwZS/1245/
CSS:
html, body {
height: 100%;
}
.tabs {
height: 100%;
}
#tab1 {
height: 100%;
overflow: auto;
}
Maybe you have solved this already, but here is a solution with position: absolute, that works for us. Could be a starting point for you.
/Staffan
.tabs{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
}
.ui-tabs .ui-tabs-nav {
position: absolute;
top: 0;
left: 0px;
height: 18px;
right: 0;
}
.ui-tabs-panel {
position: absolute;
top: 18px;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
See DEMO.
Keep the UI tabs fixed by using CSS position:fixed.
.ui-tabs-nav {
position: fixed;
width: 100%;
}
Then use jQuery to give the contents a margin-top so that they would be shown below the UI tabs by default.
$("#tab1").css("margin-top", $(".ui-tabs-nav").height());