When I positioning my wrapper absolute and right there is no horizontal scrollbar triggered when I shrink the window.
Example:
http://jsfiddle.net/Ue6aN/
Code:
<div id="wrapper"></div>
#wrapper {
width: 400px;
height: 400px;
position: absolute;
right: 20px;
top: 0px;
border: 1px solid red;
}
If I switch right: 20px; to left: 20px; it's working, but not otherwise. Any idea how to fix that without javascript?
The problem is that there is no content following #wrapper. To get a horizontal scroll there has to be content anchored on the left edge of the document that becomes hidden when the viewport is narrowed, or said content exceeds the viewport width. Since #wrapper is floating right, that's impossible because it has no left-side anchor point. :after makes it work though.
#wrapper { float:right ... }
body:after {
clear:right;
content:' ';
display:block;
height:1px;
min-width:420px
}
The CSS above adds a space after the content of body, which is #wrapper. That space is at least the width of #wrapper's box model, but has no float, and is anchored to the left edge of the viewport. So... as soon as its far right edge is hidden, the horizontal scrolling is triggered; thus giving the illusion that #wrapper is causing the scroll event.
The fiddle: http://jsfiddle.net/jg3nH/
Using float right would be more logical to me but you need to absolute position you could set the width or min-width of the containing element.
body {
position: relative;
height: 400px; //needs to be at least 1px
width: 100%;
min-width: 422px; // the width you'd like to horizontal scrollbar to appear
}
Related
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
The final ancestor div in my page needs a margin on all four sides, to give it a panel effect. Here is my code:
CSS:
html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner { /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}
HTML:
<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>
As you probably guessed, there is a lot more going on here than what is written. I have several columns with divs that all need this margin for the panel effect on the .inner div. Thanks for any help.
BTW, I have tried absolute positioning and it only positions based on the window, not on the parent element, even if I set the parent to position: relative.
If you set .inner to width 100% and add a margin, it will be wider than its container. You can set a padding or a border instead. For example, you can add a white or transparent border of 10px.
Another option is to make #bibletree position relative, then make .inner position absolute and specify top, bottom, right and left:
.inner {
bottom: 10px;
top: 10px;
left: 10px;
right: 10px;
position: absolute;
}
This will make it the same size as #bibletree, minus 10px on every side.
Margin:10px is working right?? you need not no specify the width for inner div, as div is already has block option. check here updated demo http://jsfiddle.net/QShRZ/5/
I have a <div id="wrapper"></div> with
#wrapper {
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
When I resize the viewport so that horizontal scrollbars appear, the right margin disappears; I can only scroll as far right at the element's content, but I want the margin to be present on all sides. It also happens to the left margin if right: 0; is applied, and to the bottom margin if the viewport is made shorter. Giving wrapper a position: static; (default) makes no difference.
Why is this happening? It doesn't follow normal margin collapse rules. How can I get my margin back? I've tried giving the body padding/margin.. nada.
jsFiddle
Background Info
The default width of the body element is the html width which is also the window width (or iframe width in such a case). The default behavior of a block level element is that the scroll only accounts for the actual element (hence, it doesn't care about the right margin if there is nothing more to display on the right). This causes your right margin issue. (By the way, according to this article, the scroll bars are actually appearing on the html element, not the body.)
For Position: Absolute
By having #wrapper with position: absolute, the body element ends up with zero height. This causes your bottom margin issue in this case.
A solution is to account for the margins like so (see fiddle):
body {
min-height: 320px;
min-width: 420px;
}
This assigns a minimum dimension to the body equal to the width + margins and height + margins of the absolute element.
Now, I'm not sure what you expect to happen if you have right: 0 set, as forcing a left margin to "remain" just ends up causing, in my opinion, a premature scroll bar to activate. See this fiddle.
Regarding Position: Static
The default block level behavior can be changed by forcing a shrink-wrap like behavior on the body element using (see fiddle):
body { display: inline-block; }
Note: that body { float: left; } did not give me the same shrink-wrap behavior (see fiddle).
The inline-block element will account for the margin of its inner elements to determine its own width, which then allows the right margin to work.
The reason the display: inline-block; solution does not work on the #wrapper being position: absolute is because it makes the body have a zero width and height, since the absolute positioning takes that element out of flow and there is nothing left inside body to give it dimension.
The above was currently only tested on IE9.
I'm afraid there's only one simple and quick solution, and that is to create a new div inside the wrapper div.
http://jsfiddle.net/QHKmN/2/
CSS
#wrapper {
background: black;
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
#inwrapper {
background: green;
height: 290px;
margin: 5px auto;
position: relative;
width: 390px;
}
HTML:
<div id="wrapper">
<div id="inwrapper">
</div>
</div>
And there's your margin.