I have a container DIV set to "position:fixed", that includes another div set to position absolute.
Is there any way I can make this included div with the width and the height to fit the content, and not always 100%?
This is what I have: http://jsfiddle.net/ydSqU/
<div class="transparent_background">
<div id="window">hello.</div>
</div>
This is what I would like: http://jsfiddle.net/3BYPu/ (without having to manually set width/height).
<div class="transparent_background">
<div id="window" style="width:30px; height:30px">hello.</div>
</div>
aur0n,
If possible, the best and easiest way to do this is to use javascript to calculate the height and width of the elements then position the inner element accordingly.
To accomplish this, you simply take the width of the containing element and divide it by two, then set the left value of the inner element to that amount minus half its own width. Then, do the same for the height.
Also, one of the things you might have missed is that your inner div should be set to position: relative and display: inline. The reason your div is stretching to match the width of the containing element is because position: absolute takes the element out of normal flow, while position: relative leaves it in normal flow.
Here is the code I used (using jQuery):
// centering the width
$("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px");
// centering the height
$("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px");
With this solution, you don't have to manually set width and height. Also, having an inner div with multiple lines of text will not be a problem.
fiddle: http://jsfiddle.net/ydSqU/3/
Can you try the below,
#window {
border:2px dotted red;
background:white;
width:50%;
height:auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25%;
vertical-align:center;
}
#aur0n change the css like this
#window {
border:2px dotted red;
background:white;
position: absolute;
clear:both;
}
Related
I'm doing a website and I trying to center a text but I don't know what the top is not working. It works if I use something like this:
up:25px;
But this doesn't work when I want to use this:
up:50%;
Can you help me? This is my code:
.absolute{
position:absolute;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
Considering you want to center the <h2> in the <div> with id of 'menu-title', you have several ways to do that.
If you want to use the top property you first have to define the position to fixed, like this:
#menu-title {
position: fixed;
top: 50%;
}
The other way to do that is to use margins:
#menu-title {
margin-top: 100px;
}
You can always change the px.
You should use position:fixed
and also depends on the size of the text you can move it to exactly in the center with transform
#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
hope that helps
Make position:fixed
.absolute{
position:fixed;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
First of all... it IS working, only not as you expected it. The CSS top:calc(50% - 2.5em), is relative to the first POSITIONED ancestor element. In your case this is the relative (parent) element with id="menu". The height of this element is 0. Therefore it works as it should, but apperently not as you expected.
You might have expected that the menu had a certain height. It does not, because its only child (the menu-title div) is positioned absolute. Absolute positioned elements do not grow their parents.
More likely is that you expected that the title would position relative to the viewport height, instead of relative to its parent.
There are three ways to position the menu-title relative to the viewport height:
Solution 1. Remove relative positioning from the parent
This will make the parents position static (not positioned) and the first positioned ancestor element becomes the viewport. The viewport has a 100% height by nature. Therefore this solution works. A working example of this solution can be found here: http://codepen.io/anon/pen/bBLZva
Solution 2. Give the parent 100% height
When removing the relative positioning from the ancestor(s) is not an option, you can give the parent an 100% height. This, however, is not a straight forward task. Simply adding the CSS height: 100% to the parent is not enough. The height of the menu div is relative to the height of its parent element and not to the height of the viewport. Therefore you need to set their parents explicitly to 100% (viewport height). This can be achieved by adding: body,html {height: 100%;} to the CSS. A working example of this solution can be found here: http://codepen.io/anon/pen/XNZGOv
Solution 3. Use position fixed
Know that position: fixed is fundamentally different than position: absolute AND has compatability issues on older iOS and Android versions (stock browser). However it MIGHT result in the expected behaviour. This can be explained by the fact that 'position: fixed' implies positioning relative to the viewport (and not to the parent). You should use position fixed on the title itsself. A working example of this solution can be found here: http://codepen.io/anon/pen/PbQgpB
I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I have two <div> elements, one next to the other. Both have the CSS attribute display: inline-block;. Now the second <div> element has a fixed width of 100 px, whereas the first <div> element doesn't have a fixed width: it depends on the size of the window.
My problem is that the first <div> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <div> elements can align one next to the other at all times.
I've looked at posts with similar questions, but none really dealt with the case of inline-block.
EDIT: Here is a jsfiddle: http://jsfiddle.net/y3sXu/ I want the first <div> to provide some room for the second <div> on the same line.
There's no particular reason to use display: inline-block to do this.
Here's a clean implementation using floats instead: http://jsfiddle.net/y3sXu/14/
<div id="container">
<div id="DivB">b</div>
<div id="DivA">a</div>
</div>
#container {
overflow: hidden;
}
#DivA {
overflow: hidden;
}
#DivB {
float: right;
width: 100px;
}
This is an old question but has some weight in Google so I thought I'd update it with a new answer. A more modern way to accomplish this is to stick with display:inline-block; and use calc for the width of the variable element.
So long as you have one fixed width inline element width: 150px, you can offset the variable width element by the fixed width calc(100% - 150px).
Your code should look like this:
.fixed-width-element {
display: inline-block;
width: 150px;
}
.variable-width-element {
display: inline-block;
width: calc(100% - 150px);
}
I think I understand what you are asking for. http://jsfiddle.net/y3sXu/6/
I have gone for a traditional two column layout, as it seems like the best way to solve your problem.
float has been used to ensure that the right hand div always sits on the right, and margin-left to keep the left div away. overflow:hidden is used a cheap and cheerful clearfix.
best way I can figure doing it is with absolute positioning:
div#TextB{
position:absolute;
right:10px;
top:10px;
}
div#master{
margin-right:120px;
}
http://jsfiddle.net/Vnxr7/1
There is one very ugly solution:
Set the overflow of the outer div to hidden, take the div out of the dom using position:relative, setting the left to -100px and the width to 100%.
You have to play around with the display, position and left/top etc. or get back with some more details so one could know what you want to achieve.
what about this ?
div {
background:green;
margin-right:100px;
}
#TextB{
width:100px;
background:red;
float:right;
margin:0px;
}
Updated version
Just give the outer div a padding of 50px on both left and right side
EDIT
Place this where u want to put the gap:
<div width="100px" height="1em"> <div>