I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.
Related
An element is positioned absolutely and is made to full width using the left and the right properties set to 0
The problem is, when the window is zoomed, the element is made full width only to viewport. The below images explain the problem in detail
Is there any CSS hack to fix this issue.
JSfiddle to test: http://jsfiddle.net/vaakash/kdgJp/
You can do the following:
body {
position:relative;
float:left;
}
#header {
width:100%;
}
http://jsfiddle.net/PNaSz/
This will make sure the absolute element orients against the body in width (because its positioned relative), float:left will make sure the body is as wide as the content.
Is there a reason you can't use width: 100%;?
I have a website with a gradient as background on the body. The .main div is absolutely positioned. I want it to have the same height as the content inside it, but how can I achieve that?
if the elements inside your absolute positioned div are positioned relative and have width and height you can apply this css to your .main div:
height:auto;
this will calculate the height depending on the height of all the content inside
Definitely do not have your main/container/wrapper div be absolutely positioned. Have it be positioned relatively.
<div class = "main">
<div class = "content">....</div>
</div>
Then you have your CSS:
.main {
position: relative;
margin: 0 auto;
}
.content {
height: 100%;
}
Look at this jFiddle: http://jsfiddle.net/persianturtle/3eJGr/
A great article on what absolute positioning really does can be found here
A segment:
Absolutely positioned elements are removed entirely from the document
flow. That means they have no effect at all on their parent element or
on the elements that occur after them in the source code. An
absolutely positioned element will therefore overlap other content
unless you take action to prevent it.
I have a <div> that I want to center (margin auto) and grow as content fills it, so I'm using min-width and min-height to accomplish this, but what's happening is the child <div> is taking on the parent's(<body>) width instead.
How can I prevent this from happening?
example: http://jsfiddle.net/kRF5d/1/
Since div is a block-level element, it's going to fill the entire width of the parent unless a proper width is set. I recommend applying display: inline-block; to the child div.
Just change position to absolute from relative.
#top {
min-width:10%;
min-height:50px;
background-color:blue;
position:absolute;
margin:auto;
margin-top:10px;
top:0px;
z-index:10;
}
If you don't want your #top div to be %100 width then give it a width.
http://jsfiddle.net/kRF5d/3/
The problem you're seeing is because min-width sets the minimum width, it doesn't limit the maximum width. So because divs display as block-level elements, it automatically grows to the same width as the parent element.
So while I don't know specifically what you're trying to accomplish with this, that's the reason it's not working as expected.
I have a container div that has the height of my body which is 100%
#pageContainer{
width:800px;
margin:auto;
height:inherit;
}
inside it i have second div positioned absolutely
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
So my page looks like this:
<body>
<div id="pageContainer">
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
<div>some content here</div>
</div>
</body>
So the problem is the absolutely positioned div has height equal to the screen size, not the page, another words when page is heigher than the visible screen, when I scroll down the div is not expanding to the full height of the parent div (pageContainer). I have tried the top:0px;bottom:0px; as well and it doesn't work. Any one knows what's the trick here?
Javascript: You'd either use jQuery via .height() or EqualHeight,
or
CSS: you'd do something like this: CSS equal columns
You have to set the height of each element in the hierarchy to make it expand like this.
Try something like:
html, body {
height: 100%;
}
Setting the height of the html element is the one that I generally forget to do. It is usually also be necessary to set the #pageContainer height to 100%, although you have it inheriting from the body, so in this case you're okay.
Try adding position:relative; to your #pageContainer. Currently, the absolutely positioned div is taking it's position from the window and not the container div.
I have a parent div that is a specified width and height. If I have a child div inside that, that is outside the boundaries, is there a way to make the parent div adjust size to fit the child div?
EX:
<div style="width:500px; height:500px; position:relative;">
<div style="width:300px; height:300px; position:absolute; top:250px;">
Some Content
</div>
</div>
As you can see in this example the child div would overflow the parent div on the bottom by 50px. I do not want to use overflow:auto because that just creates scrollbars. I really want the parent div to adjust and add 50px in height to compensate for the child div.
Check this out.
http://jsfiddle.net/jURc9/8/
You want to push the child down 250px from the top of the parent so do no use top:250px. Use margin-top:250px; and position:relative;