I have a website with the following basic layout. Essentially, I have the NAV div and SIDEBAR div at fixed positions. This is because when a user scrolls down on my page, only the MIDDLE COLUMN div will move.
The problem I have is that when the window gets shrunk horizontally, the SIDEBAR moves to left and eventually overlaps my MIDDLE COLUMN.
I have the body set to a min-width but it only affects the SIDEBAR if it is position:absolute and not position:fixed
Is there a way to keep my same method of scrolling, but have the SIDEBAR div stop moving left after a certain pixel constraint?
Thanks!
EDIT MARKUP:
div.MASTER {
position: inherit;
width:100%;
height:auto;
}
div.NAV {
position:fixed;
top:0;
left:0;
width:200px;
}
div.CONTENT {
float: left;
position: relative;
width:100%;
}
div.MIDDLECOLUMN {
float:left;
width:100%;
height:100%;
text-align:center;
}
div.SIDEBAR {
position:fixed;
top: 0;
right: 0;
width:200px;
}
Ah I see the issue. You need to assign a min width on the main container. Set the min-width to the width of the element right before it breaks.
Add a margin-left equal to the width of the nav bar to the content div.
You can use the scroll function in jquery:
$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional
$(window).scroll(function()
{
if ($(window).scrollLeft()>$left)
{
$('#yourdiv').addClass('floater');
$('#yourdiv').removeClass('floated')
}
else
{
$('#yourdiv').removeClass('floater');
$('#yourdiv').addClass('floated')
}
});
});
where floater class is with posit absolute and floated is with position fixed.
EDIT 1:
Maybe you can use all percentage width even in the NAV bar like:
.nav{width:20%; position:fixed;}
.master{width:60%; position:absolute;margin-left:21%; }
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
I have a simple slider consisting of images and text-only slides. I'm trying to set a background colour overlay on the slides, but I'm having trouble positioning and setting an exact width of the overlay in percentage.
Here's a codepen of what I'm working with: http://codepen.io/anon/pen/RrewXV
.slide-text-half {
background:rgba(130,20,20,0.8);
color:#fff;
padding:0px;
height:100%;
width:inherit;
z-index:2;
position:absolute;
top:0;
}
Setting a 50% width on the slide-text-half class sends the background into a frenzy and I can't figure out why. Any suggestions?
Elements with position: absolute are sized according to its first parent that have a position different than static.
So if you want to size the div proportionally of the slide, you have to add a position: relative on the slides, and make sure they have the height of the slider with:
.slick-track {
height: 100%;
}
.slick-slide {
position: relative;
}
Here is a pen: http://codepen.io/tzi/pen/eJPmbZ
You need to add
.slick-initialized .slick-slide {
position: relative;
}
I'm attempting to change the width of the Nivo slider on my blog. Currently it spans the entire width of the page wrapper and I'd like to put a left and right margin so it is centered and aligned with the navigation bar and not stretching out to the sides. (I will be resizing the images to fit once I can figure out how to change the width of the wrapper. I've tried changing the width under the css section below. The width changes, however the slider and image are then align hard left. I've also tried sticking in margin tags but it doesnt seem to affect it. I'm stumped.
My Blog
#slider-wrapper-full { width:1000x;
height:400px;
overflow:hidden;
padding-top:10px; }
#slider-wrapper-full #slider { width:1000px;
height:400px;
background:url(images/loading.gif) no-repeat 50% 50%; }
I changed this:
.nivoSlider { position:absolute;
overflow:hidden; }
to this:
.nivoSlider { width: 900px;
overflow:hidden; }
Change the width of the nivoSlider class
.nivoSlider {
width: 900px;
}
See the complete code for this page this link, and in the end result.
My div # wrap (blue) contains the entire contents of the page, I have several divs inside it and one of them is the # leftcontent would like to stay with the height at the bottom of the page (even the # wrap div.
Basically, the red line (at bottom of page) should sit on the blue line (at bottom of page)
Add the following css rule:
div#wrap {
/* the other css rules for this selector */
position: relative;
}
And replace the css for div#powered with this:
div#powered {
font-size: 10px;
position: absolute;
bottom: 2px;
right: 2px;
}
Live test : http://jsfiddle.net/moeishaa/VB8L9/
Setting the containing element (in this case #wrap) to position:relative and then setting position:absolute; bottom:0; left:0 will work, but will require you to set a height element of some kind to your #wrap div.
It's because your div#powered has a clear:both on it. An alternate way to position that div would be to use positioning (make sure div#wrap has position:relative):
div#wrap
{
position:relative;
}
div#powered
{
position:absolute; right:0; bottom:0;
}
.clear, div.address /* removed div#powered */
{
clear:both;
}
See example →
I would like to mask a asp page by a div, this one have to completly cover the page.
I can get the size of page and resize the div with this values:
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
It is ok bue the mask is contained in a div in the page.. So the mask set his position from the top left of.. the div!
How can I set the position to the top left of the whole page? thanks a lot for any ideas..
Set the mask CSS to:
#mask
{
position: fixed;
top:0; left:0;
width:100%; height:100%;
background: red;
}
It is going to start at the point 0 and cover the whole page, regardless of the scroll due the position: fixed
Example on jsFiddle
<div class="maskPage">
<div>
Css
.maskPage
{
top:0;
left:0;
width:100%;
height:100%;
background: #ccc;
position: fixed;
}