In FX and IE the following code makes two bars, but the blue one is slightly wider than the browser screen. Any resizing will leave a horizontal scrollbar with the tail of the blue bar offscreen to the left. This is boiled down from a much larger page and I can't remove the position:absolute element in the original. Can anyone figure out how to make the blue bar only 100% wide so it matches the red one and doesn't cause a horizontal scrollbar? Any ideas what's behind this behavior? I'm stumped. Thanks very much.
<hr style="border:1px solid red; width:100%;"/>
<hr style="position:absolute; border:1px solid blue; width:100%;" />
Simply:
body {position:relative;}
Demo http://jsfiddle.net/qyvtzyfh/
Reason:
In a very short simplified description, position:absolute; and width:100%; on the element make the width of the element relative to the immediate parent with an explicitly defined position:relative; or position:absolute;, in your case since you don't have it, it gets the width of the initial containing block (which contains the html element as well) instead of the body, by adding position:relative; to body you make the width of the element relative to body (besides its position).
Related
I have a div with absolute position floating on the right side (green).
It is correct that protrudes half
The problem is when the window to the minimum size of 985px page is reduced. Although the div is floating generates side-scrolling, is it possible to avoid this by reducing the window scroll?
<body style="width:100%; min-width: 985px; padding:0px; margin:0px; color:#FFFFFF; background:#160E30; border:2px solid yellow;">
<div style="position:relative; width:985px; margin:0 auto; height:70px; border:2px solid #FFFFFF">
<div style="color:#FFFFFF">TITLE</div>
<div style="position:absolute; top:-10px; right:-15px; width:100px; height:30px; border:2px solid green;">FLOAT</div>
</div>
http://jsfiddle.net/sb8c216s/4/
http://fiddle.jshell.net/sb8c216s/4/show/
It's a small picture by simply design. Half of the image is within the page and the rest outside. When the window is reduced to the minimum width of the body, half of the image is not hidden, shown full generating a small scroll.
If I've understood your problem correctly, the problem is width: 100% on the body tag. Remove this and it will remove the scroll bars.
This happened because you have a border applied. width: 100% will make the element the full size if the parent element (in this case the entire document window). Then border is added which makes the element bigger than the document window.
This is normal behaviour based on the "box model"
http://www.w3schools.com/css/css_boxmodel.asp
The body tag is a block level element which means that it will take up the full width of it's parent element unless told otherwise. The default setting for the width attribute is auto which means it will automatically reduce the width so that the entire element (width/padding/border/margin) will fit without increasing the size of the parent element.
This is due to the extra space taken by the borders. Add box-sizing: border-box; to body css. It will solve your problem.
SOLUTION:
Body tag has overflow:auto property provided
Container element has overflow: hidden
'Left' and 'Right' elements are moved within the 'main' div container
https://wordimpress.com/how-to-position-elements-to-the-negative-right-position-and-prevent-horizontal-scrollbars/
Why does setting an element to be position:fixed change its width? I know that HTML elements by default span the entire width of the browser window, but when I set the position on my header to be fixed, the <div> shrinks to zero width. Why is this?
Trying width:auto does not fix it, the <div> still has zero width!
This example is taken from Code Academy "Build a Resume" project at the end of their Web Fundamentals course.
I have an HTML file like so:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
and a CSS file like so:
div {
border: 5px solid red;
border-radius: 5px;
}
#header{
height:30px;
background-color:orange;
z-index:1;
}
#footer{
height:30px;
background-color:teal;
clear:both;
}
.left{
height:300px;
width:200px;
float:left;
}
.right{
height:300px;
width:200px;
float:right;
}
UPDATE: I noticed that setting width:100% does keep the width all the way across the browser window. What is going on here? I've read Why does fixed positioning alter the width of an element? but am not sure how that applies here.
Edit: Thought I would move this up from the comments and try answering it here, to give more direction on where I'm confused:
"Yes, it seems like "Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block" is the key part. So I see that position:fixed will set the dimensions of my relative to the viewport, but isn't the viewport the whole browser window? So why does its size collapse to zero? And beyond that, why does width:auto not fix it but width:100% does make it span the whole horizontal length again?"
width:auto is different from width:100%. width:auto will expand the width of the element to all horizontal space within its containing block. Since the space is on the inside of the containing block it doesn't count borders/padding/margins.
width:100% does what width:auto does and adds the width of the borders/padding/margins of the containing element. difference between width auto and width 100 percent provides a good visual demonstration.
So, when I set width:auto on my position:fixed element, and the position:fixed shrink-wrapped the element's width to be that of its content (which was nothing), then the width automatically adjusted to be that of the containing element, which in this case was _________ (what? and why did it have a width of zero?).
When I set it to be width:100% then it includes the padding/margins/border of _________ (what? and why did it expand to cover the whole page horizontally?).
The reason is because both fixed and absolute positioning take the element out of the flow of the document. The residual effect of this is that, unless explicitly told otherwise, the element will now grow/shrink according to the size of its content rather than the size of its parent.
As you've already discovered, a simple fix is to give it a width of 100 percent:
.fixed-element{
position:fixed;
width:100%
}
To address the issue of the quote on fixed positioning:
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.
I actually find it to be quite poorly worded. It's not meant to say that the dimensions will grow to the size of the viewport. Instead it's trying to distinguish the specific differences between absolute and fixed positioning. More thoroughly put: the dimensions/size of the fixed element will always be relative to the initial element. Whereas the dimensions/size of the absolute element will be relative to the containing element. That doesn't explicitly mean that it will actually take 100% of the viewport by default...
This is the default behavior.
Read http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Specifying_dimensions
Absolutely positioned elements will shrink-wrap to fit their contents
unless you specify their dimensions. You can specify the width by
setting the left and right properties, or by setting the width
property. You can specify the height by setting the top and bottom
properties, or by setting the height property.
I need to create a HTML page that is composed of two main parts: a fixed header part (a selection bar) and a second part that displays some text. I have tryed the code below, but as I am new to CSS this doesn't work as I wanted to:
9 <style type=\"text/css\">
10 #header {
11 position:fixed;
12 top:0px;
13 margin:auto;
14 width: 100%;
15 background:#F0F0F0;
16 }
17 #content {
18 position:absolute;
19 top:90px;
20 }
21 </style>
22 </head>
23
24 <body>
25 <div id=header>
26 <h1> HEADER: Long header................................................................... </h1>
27 </div>
28 <div id=content>
29 <p> Content...</p>
30 </div>
31 </body>
The "content" part goes under "header" but I am having two issues with this code:
when scrolling, the "content" text goes over the "header" text. I
need to hide the scrolled "content" text under the header.
when resizing, if the header contains a long text, after resizing that text goes on the next line and this affects the "content" part, which starts at 90px from the top. How can I position my content part so taht it is displayed below the "header" when resizing, but when scrolling goes under.
Thanks in advance for your help!
Try Following:
#header {
position:fixed;
top:0px;
left:0px;
margin:auto;
width: 100%;
height:90px; /* To make Underlying #Content visible */
overflow:hidden; /* This will hide extra content after resizing */
z-index:10; /* This is Important */
background:#F0F0F0;
}
#content {
position:absolute;
top:90px;
left:0px;
z-index:1; /* Any value <10 */
}
Adding z-index and overflow will solve your problem.
DEMO
Z-index:
The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you.
Overflow:
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.
CSS positioning:
Static.: This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much, it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
Relative.: This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
Absolute.: This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.
The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
Fixed.: This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. Take a look at this site (update: dead link, sorry), where the left sidebar is fixed. This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. The bad is that there are some usability concerns. On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. Cool effect, can be useful, but needs to be thoroughly tested.
Dont Only Write The Code. Understand It before writing.
By courtesy of: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Hope it helps.
For More: http://css-tricks.com
Try this in your header CSS. The z-index changed.
#header {
position:fixed;
top:0px;
margin:auto;
width: 100%;
background:#F0F0F0;
z-index: 1;
}
You should create a http://jsfiddle.net/ including your markup and css.
Some things I can point out right now.
Fix your syntax errors (missing quotes)
Your header is fixed thats correct. You don't need the margin: auto. no effect.
I think you don't need a position absolute on your content. You can add a z-index to the header to ensure it's always over the other elements to hide the other element under the header.
Just remove
position:absolute;
top:90px;
from #content.
Here is the demo
Full code:
<style>
#header {
position:fixed;
top:0px;
background:#F0F0F0;
}
</style>
<body>
<div id=header>
<h1> HEADER: Long header................................................................... </h1>
</div>
<div id=content>
<p> Content...</p>
</div>
</body>
Z-index on both header and content fix your problem!
Here an example http://jsfiddle.net/52Z7L/
#header {
position:fixed;
top:10px;
margin:auto;
width: 100%;
background:red;
z-index:100;
}
#content {
position:absolute;
top:90px;
z-index:0;
}
Is there any neat CSS-only way to make an absolutely positioned div element stretch to the bottom of the document (not just the browser's window)?
Essentially, the div element is the background of a modal popup, overlaying the rest of the application. It should cover the entire page - from top to bottom. However, when the content is larger than the browser window, height still only sizes the element to the window height (and the content flows out of the div).
#background{
background-color: green;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#content{
color: white;
height: 200%; /* simulate a lot of content - just put a large value in here */
}
Used like this:
<body>
<div id="background">
<p id="content">a</p>
</div>
</body>
For example, look at http://jsfiddle.net/TuNSy/ : The green background stretches to the visible portion of the parent element, but when you scroll down, you'll see that it doesn't actually stretch all the way to the bottom.
There are a couple of other questions, but they don't apply to my problem:
CSS Div stretch 100% page height : Just stretches the element to the window height and doesn't work when the content is larger than the window.
Absolute position background 100% of page height : illustrates the problem, but has no accepted answer, the original poster ends up using JavaScript.
The problem is that your absolutely positioned div is larger than your body which is why you are having the problem of the white background. If you simply add overflow:auto; to your #background, it should handle the overflow properly
Example
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.