I have a div fixed inside a relative one.
my problem is, the div fixed is bigger than the other, but they have the same size:
<div id=all>
<div id=top></div>
</div>
.
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:fixed;
background:rgba(255,0,0,.5);
}
https://jsfiddle.net/y7yc0n21/
I need div top to be fixed.
what is wrong? Why div top is bigger than div all?
The width of the fixed element is calculated in regard to the viewport width, whereas the one for the other is calculated in regard to the width of its parent element, which is body in this case.
And the width of body is different from the viewport width, because body gets a default margin and/or padding applied from the default stylesheet – so you are taking 80% of two different input values, and therefor the results are different as well.
Eliminate the default margin/padding for body, and the problem is gone:
body {
margin:0;
padding:0;
}
https://jsfiddle.net/y7yc0n21/2/
If you specify
body {
margin:0;
}
they will become the same width.
Also I think that is not what you want as fixed is calculated relative to viewport.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
https://developer.mozilla.org/en/docs/Web/CSS/position
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:absolute;
background:rgba(255,0,0,.5);
}
If you give any element
position: fixed
it makes the element relative to the viewport instead of it's offsetParent. Therefore, the width of div 'top' is calculated 80% based on the width of the viewport and not on the basis of its parent div 'all'. So, your inner div has greater width than outer one.
Related
I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
Please check this example: http://jsfiddle.net/fFSZN/2/
You see how part of the img gets out of the div because of the border. The current width of the div (300px) is just set for the example, for real it would be 100% (so I can't hardcode values). My question is how to fit the image and its border into the div with CSS only?
You need to use box-sizing: border-box to make this work. Also, note how I set the image to max out at 100% of the containing element's width, while putting the height on auto to maintain proper aspect ratio.
http://jsfiddle.net/fFSZN/6/
More info on border-box from Paul Irish: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
First, for it to be a fluid image, give it max-width: 100%.
Then, instead of a 5px border on the image, give the containing div 5px padding and a black background.
div {
width:300px;
border:1px solid red;
padding:5px;
background: #000;
}
img {
max-width:100%;
display:block;
}
Demo
Remove the black border around the image. The border on the left side added extra space so it went out of the div's boundaries.
img { width:100%; display:block; }
Here's the updated jsfiddle: http://jsfiddle.net/fFSZN/4/
I have a div with variable dimensions that I need to dynamically horizontally center within its container. Here is the current structure...
<div class="outer">
<div class="inner">Sample</div>
</div>
...the "inner" div is the one that will very in height and width based on its contents, and it needs to be horizontally centered (equal space at its left and right sides) within the "outer" div, which may or may not have fixed dimensions (so the "inner" may be within the "outer" div's width, or it may spill out, but always be centered in it). Here are the styles I currently have...
.outer {
width: 10px;
margin: 0 auto;
position: relative;
}
.inner {
position: absolute;
bottom: 0;
}
...the properties of the "outer" work well to center it within what it's contained in, but the properties of the "inner" have it aligned to the left edge of the "outer" div.
I tried a few options with negative margins and left/right values for the "inner", but they seemed to depend on fixed pixel values whereas I need the dimensions of it to remain variable relative to its content.
The caveat is that the "inner" div needs to be absolute positioned because it has to fix to the bottom edge of the "outer" (hence the "bottom: 0") even when the height of the "outer" is shorter than the inner.
Here's a running example: http://jsfiddle.net/bVC3J/
Anyone have any thoughts on how I can achieve this without using JS? If there is no CSS solution I am open to JS, so you're welcome to suggest that as a last resort. Thanks.
This might do the job for you: http://jsfiddle.net/fF3A4/1/
.outer {
width:300px;
height:300px;
display:table-cell;
background:#333;
vertical-align:bottom;
text-align:center;
}
.inner {
width:200px;
margin:0 auto;
background:#ccc;
display:inline-block;
}
I have a content div that loads different pages. I can't set fixed position to it because I want to scroll through it's content.
This div is loaded inside a 100% height table(#main). Problem is, if the content div has small content height(so scrollbar doesn't appear) my div moves below, like more top margin is applied. I want every page though to load on same y position.
What am I doing wrong?
Note that: Below #content there is a footer div with relative position on which I also don't want to apply fixed position property. It seems that the more the #footer is dragged down the page it is taking #content with it as well, since they are on same table row.
#main{
width:1010px;
height:100%;
}
#content{
margin-top:303px;
padding: 35px;
}
#footer{
z-index:2;
position:relative;
}
The problem is that your td height is 100%, and you didn't set the vertical-align to top. So it default to middle. :
#main td {
vertical-align: top;
}
I need to position 2 divs alongside, first's width %20 of the page and second's width %80 of the page. I don't know which position I must give divs. Relative, fixed, absolute, inherit?
How can I do it?
You can write like this:
.firstdiv{
width:20%;
float:left;
}
.secdiv{
overflow:hidden;
}
Check this fiddle
Don't give any position to divs just use float:left; and set the width to 80%(or 79%) and 20% as usual
div_first
{
float:left;
width:79%;
}
div_second
{
float:left;
width:20%;
}