http://jsfiddle.net/yLt5v/
.tc{
position: fixed;
width: 100%;
}
When giving position:fixed for .tc the background is overflown.
How to solve this?
Set percentage and display block
.tc{
position:fixed;
width:54.5%;
display:block;
}
DEMO
Assigning an element position:fixed; makes it relative to the BODY element and it will no longer follow the width of the parent element so the width 100% expands it the full width of the page. Now since you have no "left" position declared it will keep alignment after the parent element and the excess width just gets overflown to the right.
Can you solve your problem by adding left: 0; top: 0;? Without left the fixed element starts at his own position and have 100% width of viewport.
Related
I have a container DIV which is used in all the pages of my wordpress site. We can call it the parent DIV here. And I also have a child div inside it. The parent DIV is set to 1170px width. And the child DIV is set to 100%. So, its taking the full width of parent DIV naturally. But I want my child DIV to go full screen without getting affected by the width of parent DIV. To make my child DIV go full screen, the most simple ways were to take the child DIV out of parent DIV or to make the parent width go 100%. But I can't do both. It has to be where they are and also since the parent DIV is used in nearly all the pages I can't change its width to 100% in the stylesheet. Is there anyway how I can get my child DIV go full screen without getting affected by the parent DIV?
.container {
width: 1170px;
}
.child {
width: 100%;
}
Make child div's position fixed:
child-div {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #FFF;//Optional
}
i believe you will find the answer here
.child-div {
position:absolute;
left:0;
right:0;
}
Answer took from this post
Is there are way to make a child DIV's width wider than the parent DIV using CSS?
I've got a div that sits inside another div and it's supposed to float above all of the other content in the div, and stick to the right of the div. To achieve this I had to set the div positioning to "Absolute" since when it is set to "Relative", it pushes all of the content to the side of it.
However, when positioning is set to Absolute, the div does not position correctly and sticks to the left side of the div instead of the right, causing usability problems. The div positions correctly when using Relative positioning, but not absolute.
I have tried setting the margin-left to the width of the div but the size of the div can change depending on the template the page is using. I have tried setting the margin-right property appropriately but the div moves when the browser is resized.
Expected result: http://puu.sh/479u1.png (this uses margin-right to position it but this was done to show simpily what was expected to happen - this cannot be used due to the unexpected movements caused when the browser is resized)
Actual result: http://puu.sh/479ya.png
CSS code for the floating div:
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
float: right;
width: 400px;
}
If you want to position the div to the right, then just use "right: 0px;" or something like that, in conjunction with "position: absolute;". As long as the parent div is positioned in some way (i.e. relative), that should do what you want.
Float does nothing on absolute positioned elements..
Use right: 0; instead of float: right;
It's a absolute div, so why float, use top and right
.GBDragBoxOptions
{
position: absolute;
z-index: 99;
width: 400px;
top:100px;
right: 50px;
}
Im using this css property to clip the content inside a div:
div {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: none;
width: 200px;
}
At the momment you see the height and width of the clipping area is fixed to 100x200. I want to mantein the fixed width but I need the height to be auto, I mean, relative to the div content. Is this possible? I tried:
rect(0px,200px,auto,0px)
rect(0px,200px,100%,0px)
But they seam to not work. Any suggestions?
Is none a valid value of overflow? Should it not be hidden?
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:
.container {
position: relative;
}
.content {
position: absolute;
left: 10%;
top: 50%;
}
<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>
The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!
The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.
10% and 50% of that zero height and width are, of course, zero.
If you give your container a height and width, your percentage positions will start to work as you want.
Here is a working example.
.container { position: relative; width:500px; height:500px; }
Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.
.container {
position: relative;
top: 10vh; // 10% of height from top of div
}
You will likely need to add height: 100% to your .container div:
.container { height: 100%; position: relative; }
and possibly all the ancestor elements:
html, body { height: 100%; }
#Jaime Dixon's answer was great. Beautiful, two great concepts given there.
The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.
Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:
example:
html, body {
height: desired_value;
}
I want to use margin in my code, but I have some problems.
Please look at:
<div id="outer">
<div id="inner1">
Margin not coming from top (not absolute)
</div>
<div id="inner2">
Div has absolue prop
</div>
And the CSS code is:
#outer {
margin: 100px;
background-color: green;
height: 300px;
widht: 400px;
}
#inner1 {
margin: 10px;
background-color: red;
}
#inner2 {
position: absolute;
margin: 20px;
background-color: blue;
}
I am not able to understand why setting position to absolute is
restricting width of #inner2 div.
Since #inner1 div does not have absolute property, it is not having
margin from top. I can't understand this. Please explain.
Here is output: jsFiddle
Ques1: I am not able to understand why setting position to absolute is restricting width of inner2 div.
setting position to absolute of inner2 div, gets the width auto so as long as text.
setting position to relative of inner2 div, gets the width of outer div.
So if you want absolute positioning, set also the width of inner2 div.
Ques2: Since inner1 div does not have absolute property, it is not having margin from top. I can't understand this. Please explain.
from the document flow, your inner div never know it is inside some other div (outer), setting border or position to absolute of outer div fix this.
fiddle http://jsfiddle.net/C7dE2/20/
setting
position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width if that is the effect you're after..
see this
absolute vs relative position width & height
You should use green div's padding-top property - #inner1 with margin-top set on high value only pushes the whole #outer further down!