I need to be able to position fixed element always inside the div.
Problem is occuring when I resize the window. Then the fixed div is always floating above all other elements. How to prevent that? I need that div to be fixed but positioned inside the div .
Here is an example:
<div id="main">
<div id="one" style="background-color:yellow;"></div>
<div id="two" style="background-color:black;"></div>
<div id="three" style="background-color:yellow;">
<div id="four"></div>
</div>
</div>
CSS:
#main
{
position:relative;
width:1200px;
top:0;
bottom:0;
left:100px;
}
#one,#two,#three
{
position:relative;
width:100px;
height:1000px;
float:left;
top:0;
bottom:0;
}
#four
{
position:fixed;
top:50px;
background-color:blue;
width:100px;
height:200px;
}
EXAMPLE try moving horizontal scroll left and right and you will see what is happening.
Change position to relative.
Example
#four {
background-color: blue;
height: 200px;
position: relative;
top: 50px;
width: 100px;
}
Check out this answer on a similar question. The problem you're facing is something that can't be solved with CSS alone, unfortunately.
Related
I would like to create a dual pane view, where the top banner of the screen is fixed, while the bottom can scroll horizontally. As the user scrolls horizontally, they should still be able to see the same top banner. I've attached some sample code and a corresponding jsfiddle.
The problem is that as the user scrolls past GROUP2 to GROUP3, the top header gets cropped. I would like the header to continue across the top of the screen as the user scrolls.
<div>
<div class="header">
COMPANY NAME
</div>
<div class="scroller">
<div class="group1">
GROUP1
</div>
<div class="group2">
GROUP2
</div>
<div class="group3">
GROUP3
</div>
</div>
</div>
.header {
width:100%;
height:60px;
background:red;
}
.scroller {
overflow-y:hidden;
overflow-x:scroll;
}
.group1 {
top:80px;
left:0px;
width:500px;
position:absolute;
}
.group2 {
top:80px;
left:540px;
width:500px;
position:absolute;
}
.group3 {
top:80px;
left:1080px;
width:500px;
position:absolute;
}
try this updated fiddle
.header {
width:100%;
height:60px;
background:red;
position: fixed;
top:0px;
left:0px;
}
I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.
Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/
I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.
So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>
Here's the jfiddle http://jsfiddle.net/pq5ckkcg/4/. I basically need the whole window and div to scroll together no matter where the mouse is. How would I accomplish this?
<div id="bottomwrap">
<div id="element"></div>
<div id="element"></div>
<div id="element"></div>
</div>
#bottomwrap {
position:fixed;
top:45px;
right:0;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
#element {
float:left;
width:200px;
height:300px;
background-color:#000;
margin:20px;
}
Your parent div needs to be relative positioned:
#bottomwrap {
position:relative;
margin-top:45px;
float: right;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
http://jsfiddle.net/pq5ckkcg/3/
The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.