So by default, an absolute positioned div will fall out of view if the window is resized, but only the left side of the div. Is it possible to achieve the same effect to the right?
What I mean can be found here: http://diabetes.connectionsquad.com
If you resize the browser window to anything below 1010px you'll notice the left side of the navbar disappears, but if you scroll right, the right side of the nav bar stays in position.
Basically I have content div that is set to 1000px. My navbar is 1050 and it is centered in that content div with absolute position, so it hangs over the content div 25px on each side. When the browser size falls below 1050px, I want that 25px area to collapse and not be visible. By default browsers do this on the left, but not the right.
Can you clear the right side the same way you can clear the left? I tried researching it, but I got a bunch of junk because the search terms get skewed.
I can't see the problem on Chrome. However, you're not setting top or left, it defaults to 0,0 for top and left, so it is attached to the top left corner of its relative parent. If you want it to be attached to the top right, you can give it
right: 0;
top: 0; /* Don't need this, it's the default;
By "out of view", I am taking it you mean out of your set content width.
Have a look at negative positioning. left:-20px; right:-20px
<style type="text/css">
div { position:absolute; left:-20px; right:-20px }
</style>
Hope helps,
Rob
Your layout doesn't require any absolute positioning, and it will give you monster headaches.
Rather than using a fixed width div in the center, you can do an outer margin or outer padding which is flexible.
/*Mobile*/
.outermargin {padding:0% 0% }
/*Screen*/
#media only screen
and (min-width : 700px) {
.outermargin { padding: 0% 7%; }
}
#media only screen
and (min-width : 1400px) {
.outermargin { padding: 0% 20%; }
}
Use margin or padding depending on your needs... This CSS structure is one way to be more fluid and easier once you are used to it.
Or you could have centered it all using something like:
#mycontainer {
margin: 0 auto; max-width:30em; }
Related
I have a page where the content is 1000px wide. About halfway down on this page, I need to have an image displayed that is 600px high and 2000px wide.
This image should always be 600px high, maintain its aspect ratio and whatever can't be fit at the current browser width, should fall off equally on both the right and left (so the image stays centered as the browser window changes).
There will only be the image - nothing on top of it.
I have tried building a div and having the image fall outside of it (beyond the 1000px, but can't make it work. If I break it out of the container it works with:
.wideimage {
background: url(../images/wide.jpg) no-repeat center center;
height:600px;
}
This works but it would be a lot nicer if I could do it within the 1000px container and have the image fall outside to the edge of the browser window.
To have the image fall outside the container and be centered try making it absolute, left 50% and offset the margin by half the width of the image: https://fiddle.jshell.net/7vpmndfo/1/
.wideimage {
position:absolute;
left:50%;
margin-left:-1000px;
}
And in order to prevent horizontal scroll bars on the browser, you would need to have you're page within a wrapper div (if it's not already) with overflow:hidden;
If you have a variety of images and so may not know in advance the width of the image, you can centre the image with the classic "centre anything" css technique:
.wideimage {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
So I have a div that stick at the top right hand corner of my screen.
I can make the div stay at the top right hand corner using the following CSS:
.dockbar {
background: #000000;
width:300px;
float:right;
position: absolute;
left:1180px;
top:10px;
height:38px;
}
But I hate this approach because the div has space to the right if the screen is larger. I would prefer to using percentage based sizing, but doing that causes the div to move with the screen (because of the percentage..)
Is there a way to position a div at the top right hand corner:
Without using fixed positioning
Without declaring exact pixel based positioning
Thanks
Change left:1180px; to right: 0px and everything should work fine.
#wrapper{
width: 800px;
}
<div id="wrpper">
<div class="dockbar"></div>
</div>
Something like this, maybe.
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}
I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }