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%
Related
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.
An absolute positioned element is supposed to be removed from the element flow, and (so I understand) not able to make the document larger (creating scrollbars) but just go out of sight and out of mind.
But in my experiment when I offset an absolute element to the left I get scrollbars and to the right I get the expected behaviour. Why does it do this, and how could I get the behaviour I was expecting?
http://jsbin.com/bosajigapifu/6/edit
If you put the positioned absolute element into a container that is width: 100%, but overflow: hidden you can "push it into the void" that way. As long as its container does not go outside of the realm of the window it will not show scroll bars.
Elements:
<div id="container">
<div id="absolute"></div>
</div>
Styles:
<style>
#container{
width: 100%;
overflow: hidden;
}
#absolute{
position: absolute;
}
</style>
Absolutely positioned elements don't push other elements, but it does push out scroll-boxes if the element it's positioned relative to is the nearest scrolling ancestor.
The idea is that it's content and should be displayed. Kind of annoying tho when you want to position something outside a scroll container.
You may use position: fixed instead of absolute.
The diference is that it is not subject to any parent element, only to the viewport itself, but it does not create scrollbars when offset...
http://jsfiddle.net/t6g4421a/
I am trying to get an<img> to resize dynamically. Sometimes I need that image to go beyond the box it is bound by, but it seems to stop and distort. Can this be done?
<div>
<img src='smjpg.jpg' />
</div>
div{
width: 20px;
}
img{
width: 100px;
}
Just use CSS for the bounding div.
#imgDiv {
overflow:visible;
}
If you still want the parent container to grow for other elements, with no fixed size, then consider using the float property or position: absolute on the child element. Absolute positioning removes the child from the flow of the page, so the parent container will see nothing to expand around. Floating has a similar visual effect, provided overflow is visible and no clearfix is used, but the child does affect the layout of its siblings. Here's a demo: http://jsfiddle.net/lpd_/rd4HP/3/ (try adjusting the result width).
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.
How do I place the link Refresh on the middle in height of the div nav_bar?
<div id="nav_bar">
<a class="nav" id="refresh" href="#">Refresh</a>
</div>
Here is a fiddle for more help
http://jsfiddle.net/axuxT/
The easiest way is to set line-height to be the same height as the container. This will fail if you ever add more text that spans more than one line (dependent on your circumstances, you could avoid this with white-space: nowrap).
You could also add top and bottom padding, e.g. padding: 30px 0.
You could add display: table-cell and then vertical-align: middle. The only problem with this one however is that it is not supported <= IE8.
If you know the height of the parent div (eg: 35px), and you know it won't change, then you can just set line-height: 35px; on the link, and the browser's inline formatting will do the rest. I updated your fiddle to show this approach: http://jsfiddle.net/axuxT/1/.
Update
If you need the container div to be able to change size, it's a bit more complex. Here's an update to your fiddle that shows this approach: http://jsfiddle.net/axuxT/3/. Note that, in this case, the content needs to be display:block, with a known height. It also requires some additional markup - an additional wrapper div, and a floating spacer div.
It sounds like an easy thing to do, right? but there's no way that's correct, you just have to you margin-top or vertical-align or position: absolute; top: 50%; margin-top: -half-the-element-height-px'.
I hate CSS.