For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.
Related
I have a navbar at the top of the page that I want to be fixed. The problem is that if I make it fixed as opposed to absolute or something, stuff that would normally be below it takes its place and it sits on top making the content invisible. Any way I can get them to notice the fixed element and position accordingly without having to position:absolute or position:relative all of them?
nav{
width: 100%;
position: fixed;
top:0;
}
Apply a margin-top or padding-top to the first non-fixed element on the page, with a value as high as the height of the fixed-position navbar. Typically that element would be main, the first section or similar, possibly also simply the first (non-fixed) div, depending on your page structure.
My actual issue is more complicated, but it boils down to this. How can I use CSS to disallow a relative positioned div to stack on an absolute positioned div.
Example of issue:
<div id="absolute"></div>
<div id="relative"></div>
div{
width: 100px;
height: 100px;
opacity: .5;
}
#absolute{
position: absolute;
background-color: red;
}
#relative{
position: relative;
background-color: blue;
}
Codepen
Is this possible with css? So the relative positioned div would be pushed down or to the side until it is not longer covering the other absolute positioned div. Basically the relative div would act as if the absolute div is relative.
To add a little detail of the nature do the issue:
I have a webpage with an absolutely positioned menu on the top and left. I then have a div in which I am injecting templates (Angular). The issue is that the templates end up under the menus. I have tried to apply a margin or padding, but is is messing up my bootstrap grid. So I was hoping the menu could be treated Iike it was relative in regards to the main div, but still stay in place.
When you use position:absolute, you're telling the browser layout engine that this element is removed from the layout of the page. You are specifying a manual position that will not impact the layout of the page in any way. Thus, you cannot both position it manually and have things layout around it.
You must pick one of the other, either don't use position: absolute so that it will participate in the layout of the page or make everything absolute and manually position things not to overlap.
There are some hybrid approaches where a item can be positioned absolutely in a container and the container itself is relative (not absolute) so that the container participates in the layout of the page and things will lay out around the container (and thus around the absolute positioned element if the container is set to be the right size), but this is really just a technicality as it puts the absolute positioned item into a non-absolute positioned container so it isn't really absolute positioned on the overall page any more.
It sounds like your problem would be solved by separating the elements and applying a float property. However, per your question, when your use the relative property, it allows you to set the position relative to it's parent. If the absolute positioned element is the parent, then your code is incorrect and keeping them separated would be a matter of hard-coding them to maintain a minimum distance from one another. However, it is not the parent then the elements have no relation to each other and you must explicitly define their position in order for them to not interact with each other. But again, it sounds like a situation to apply the float property.
I am trying to put an absolute div inside a relatively positioned div. But I don't want to define a height for the relative div.
The relative div has a background colour and when I don't define a height the absolute div goes 'outside' the relative div. I can't control how many lines the text will be so the height of the divs change
HTML
<div class="row top-footer">
<div class="top-footer-text text-center">
<div class="test">
<h1>title</h1>
<div class="footer-btn-wrap">
<div class="footer-btn">button</div>
<div class="footer-btn">button</div>
</div>
</div>
</div>
</div><!-- /top-footer -->
CSS
.top-footer {
position: relative;
background-color: #686a6f;
width: 100%;
padding-top: 40px; margin: 0;
}
.test {
position: absolute;
top: 0px; margin: 0;
}
EDIT
I want .top-footer (position: relative) to contain .test (position: absolute) with space/padding/margin on the top and bottom of .test. the height of the div is unknown because the content may take up more than one line depending on screen size
Adding whitespace around the child div is fairly trivial. However preventing the parent div from collapsing is more tricky and is the thing you need to tackle first. The problem you are having is that with the parent relatively positioned and the child absolutely positioned, the only element on the entire page that actually "knows" where the child is is the parent... and even then it's a fairly bad parent because it won't even make enough space for the child! The rest of the DOM will behave as if the element isn't even there - other non-positioned elements will float over or above it - even text will be obscured by your child div. Assuming you want to put other content in the parent div using absolute positioning in this way only means you're going to have to use absolute positioning all around the place... which can get a bit heavy on the brain debugging layout problems later on.
The only possible solutions I can think of offhand are:
Use javaascript to sniff out the height of the child div and apply that to the parent. A fairly simple job if you use a library like jQuery but that requires extra downloaded files and makes your site unnecessarily bulky if this is the only task you're using it for. THis also wouldn't solve the problem of the child div obscuring other elements on the page.
Rework your CSS (and it might take a lot of reworking depending on how far you've got and the complexity of the styling) to use display:inline-block on the child... this will stop the parent from collapsing but might give you additional layout issues.
Rework your CSS (ditto) to float:left the child div. You would then need to use a CSS "clear hack" in order to prevent the parent divv from collapsing, although this is a tiny piece of CSS you can cut and paste from elsewhere... an easy job.
If you're determined to use absolute positioning like this my preferred solution would be to use jQuery (option 1) because most of my work tends to use a degree of it anyway... it's a tool I would have handy and the code to perform this task would be quite trivial.
EDIT - Here's a little fiddle to get you started. https://jsfiddle.net/fo8mq1vf/
This is how the output of your code looks like: https://jsfiddle.net/s3zLa54t/2/. The parent div (.top-footer) does contain the .test div. What browser are you using to view the output?
As for the padding, I guess you don't see any effect of changing padding-top. Try removing the top: 0px property in the .test div.
If this is not what you were looking for, do clarify the question here.
The answer to your question is simply remove
position:absolute from your absolute div (.test)
position:relative from your relative div (.top-footer)
height:300px from your relative div (.top-footer)
This is the tested version of https://jsfiddle.net/s3zLa54t/3/ with multiple number of divs under your main div. You can check that it is not going beyond the grey background.
.top-footer {
position: absolute;
background-color: #686a6f;
width: 100%;
padding:0px;
margin: 0;
}
.test h1{
padding-left:20px;
position: relative;
top: 5px; margin: 0;
float:left;
color:#FFF;
}
.footer-btn,.footer-btn-wrap
{
padding-left:200px;
color:#FFF;
}
.footer-btn a{
padding:5px 10px;
float:left;
color:#ffffff;
text-transform:capitalize;
text-decoration:none;
}
I have a setup like the following:
http://jsbin.com/hevidoya/2/
As you can see, the lots of stuff text is wrapping, as it seems to be pressing up against the edge of its parent. I want the inner div to be able to breathe and have the content inside fill its container. I'm not sure how to resolve this, but I always thought that an absolutely positioned element broke the box model and wouldn't behave like this. Since the parent is relative, it would start its position relative to the parent, but the width would be able to extend off outside of its parents container. The more I decrease the left value, the better the box behaviors, but it is off center from where I want it to be. I also looked at bootstraps CSS code for doing dropdowns, and I think I'm doing pretty much the same thing.
Can anyone explain how to fix this, and perhaps explain why this is occurring?
You could use the white-space : nowrap css
<div style="position: absolute; top: 20px; left: 50px; white-space:nowrap;">
<p>lots of stuff</p>
</div>
This will prevent the logic wrapping (line-break) of your content because the div is contained inside its parent.
You need to set a width property on the absolute positioned element.
width: 100%
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle