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/
Related
I am developing a configuration page for my plugin in WordPress. I created an <ul> element inside a <div> element and placed it on my config page. The problem is, whenever I apply margin-right and width:100% to that div it causes the scroll bar to appear, the width of the list exceeds the total width of the page. As you can see at the bottom of the screenshot.
Here are the only styles I am applying (LESS):
div#pworks-popular-posts-list {
display:block;
margin:20px;
width:100%;
ul {
width:100%;
margin:0;
background-color:white;
li {
display:block;
div {
display:inline-block;
}
}
}
}
This is the HTML structure pulled from Chrome Dev Tools:
Could you please help me with this? Thank you.
First of all you don't need width:100%; because a display:block; div will fill its parent's width by default. But if you want to specify it for some reason (or you plan on making it display:inline-block; or something) you can use calc() function like this: width:calc(100% - 20px);.
What's happening is that you are setting the div's width to be the body's width. After that you are moving it so it causes your div to go even further and that causes an overflow-X.
I wouldn't recommend setting a block element width to 100%. Block elements automatically have 100% width of their parents.
I would set a container div with a padding: 20px; instead.
Set max-width:100% instead width:100%.
It will reduce width according to padding.
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).
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.
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
Could anyone tell me how i would get this div to be centred at the top of the screen, with equal distances from the bounds of the page on both the left and the right.
position:relative;
width:800px;
height:70px;
background-color:#0CF;
left: 15%;
Thanks!
By specifying automatic margins for left and right edges:
margin:0 auto;
This forces the browser to equalize them within the parent, which has full browser width, so it's centered since you have explicitly set the width.
Sample implementation.
Since you have a width set, you should use
margin:0 auto;
You should try this jsfiddle :
HTML :
<div>This is some DIV</div>
CSS :
div {
width : 50%;
margin : auto;
border : 1px solid black; // To see that it is centered
}
Usually when doing this you want to do something like below. It will stay withing the bounds of it's parent element and wherever you put it on the page but will place it in the middle.
If you want to put it in the code:
style="
margin-left:auto;
margin-right:auto;"
Otherwise just add that to your css for the div.
using this method will not set your upper and lower margin to auto.
use margin: 0 auto;
0 - stands for 0px top and bottom sides of the page
auto - means it'll adjust itself according to the available window size and can make it center.
Well it depends on the parent element, and why you have it as position:relative;, but generally to center a block level element with a set width, within it's parent, you can just use:
margin:0 auto