I have 4 <div> tags one after the other, all in position:absolute and I align them using top and left.
The 3rd div tag contains dynamic content and the height of the div changes according to the amount of text in it. However, as I set the top and left of all divs, the 4th div is affected by the height of the 3rd dynamic div.
How can I solve this?
http://jsfiddle.net/25Xrh/
You may want to try wrapping the 4 divs in a parent div and absolutely positioning that. Then you can allow the position of one of the children divs to affect another.
http://jsfiddle.net/25Xrh/5/
The solution you had meant that no matter what you tried to affect the top:60px and left:180px stopped it from moving anywhere other than this, so the dynamic content div wasn't able to reposition it.
Here is my test:
http://jsfiddle.net/neuroflux/25Xrh/7/
Code:
.first {
position:relative;
left:180px;
}
.second {
position:relative;
left:180px;
}
.third {
position: relative;
left:180px;
}
.fourth {
position:relative;
left:180px;
}
Related
I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.
You can check it out live here
This is how it looks without making the right content absolutely positioned.
If you hover your mouse over the map, you will see the transition.
Any helpful solutions of getting rid of this? I would really appreciate.
Thanks in advance.
That is why it don't work, your parent div has to have position to child div position take effect.
.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}
Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport
From that answer:
Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
I managed to make it work:
#content {
position: relative;
}
.info {
z-index: 0;
position: relative;
}
To make the #content to be the top layer add z-index with a higher value with the other div.
Take note, z-index doesn't work if you don't set your div position:absolute or position: relative
#content {
position: relative;
z-index: 3;
}
I have one element (a div) floating to the right of content, and below the content (which can be varying in height) I have another div that I want to stack above the floated right div, but stay below the content.
Here's an example: https://jsfiddle.net/8nap0qm6/
While this is close, I need the content within the ".over" div to not wrap when it hits that right-hand div, but instead fill up the whole ".over" div while still overlapping the right-hand div.
Putting a "clear: both/left" on the ".over" div pushes the div below the right-hand div instead of overlapping it.
I know I could absolute position the over div:
.over {
position: absolute;
top: 200px; // or xx%
left: 0px;
z-index: 5;
}
but I need it to be vertically controlled by the content so I can't put a set "top" on it.
Is there a way to achieve this? (Make white text in blue box go full width of blue box.) I'm open to using completely different code if necessary.
You just need to set position: absolute;
.over {
position: absolute;
z-index: 5;
}
JSFiddle
As the given answers don't seem to satisfy exactly what's expected, I decided to change some things to make the output closer to what you expect. Check my fiddle.
Major changes:
1) Added a #parent div to wrap the whole content
2) Absolutely positioned the .right div, relative to #parent
3) Added width to .right and all #parent's p elements so that summing both results in 100%
Just add clear: both; to your .over class:
.over{
clear: both;
/* your properties */
}
I am able to vertically align text in span(which is inside div) but i need my page to be independent of screen resolution. have used line height feature to curb the my text from going out of the div when I change the resolution..but I see its not vertically aligned as middle in all resolution. what feature in css i should look into?
<div>
<span style="width:49%; height:50%; top:25%; left:0%; line-height:50%;font-size:x-small;font-family:Verdana;font-weight:bold; position:absolute; display:block;">
Random Text
</span>
</div>
The above span tag is inside a div. Also What should be the recommended value of line-height.Should it be same as height of the span tag?
I saw this link for understanding the vertical aligning of single line text.
>
Some other CSS doubts>>
1. a textbox inside a div containing single line of text also goes out of the control while changing screen resolution. what could I possibly do to solve this?I am about to control it in a button
Remove those position unless extremely needed and use, display:table-cell
Fiddle Demo
div span {
border:1px solid red;
width:49%;
height:50%;
display:table-cell; /*check this */
vertical-align:middle; /**aligns where you want it */
font-size:x-small;
font-family:Verdana;
font-weight:bold;
}
You might wanna check out this thread too : Align multiple divs in one line and center text veticaly and horizontally
You could position the span element vertically at the middle by using top: 50% and adding a negative top margin which is equal to half of the height of the line.
Here you go:
EXAMPLE HERE
span {
position:absolute;
top: 50%; left:0;
font-size: 0.7em;
line-height: 100%; /* 100% of font-size */
margin-top: -0.35em;
}
However if you're not eager to use absolute positioning, you could follow this approach.
Note: I've nothing against table-cells, except the effect relative positioning is undefined for such types of elements. If you don't mind, you could follow #NoobEditor's solution as well.
Is it possible to centre, horizontally and verticly a DIV with absolute positioning inside a containing div (relative positioning).
Imagine an image twice the height and width of its containment div, but is contained within the div with. Rather than show only half the image starting at the top left corner would it be possible to show the middle of the image instead without JS.
CSS,
.container {
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.container > img {
width:600px;
height:400px;
position:absolute;
}
Based on this example CSS you could say top:-100px; left:-150px; however what if we don't know the size of the img.
If you absolutely position a div within another div, you can only center it exactly, i.e. work out the difference between the widths of the two divs, divide it by two and have that as your left and right margin. If you want to center it dynamically (if the size of the inner div might change, for example), it has to be relatively positioned.
I will try to explain my situation the best that I can.
I have a site where it displays a list of DIV blocks with info inside. 3 DIV blocks are created using width:33%
Inside that div block I want another hidden div block that is exactly the same as the previous div block.
So I have something like this....
<div class="columnParent">
<div class="columnChild">
"Various stuff here that overlaps parent DIV"
</div>
"Various text that initially appears, but disappears after clicking a button"
</div>
Here is the CSS...
.columnParent { width:31%; float: left; margin-right:15px; margin-bottom:4%; }
.columnChild { width:31%; float: left; margin-right:15px; margin-bottom:4%; visibility:hidden; position: absolute;
background: #FFF;}
Now what happens when the child DIV is visible, it ends up being larger than the parent. This is because the width:31% is taking 31% of the entire HTML page, while the parent div is taking 31% of its parent div(not listed here).
Is there a way to get the child DIV to take the same width as its parent?
I want the Child div to be an exact replica of its parent div. I will be changing the text inside, but the actual div should be the same size and be in the exact same position.
Purpose: I have a button that displays the child div to make the parent disappear and display a new child div that has different information. Inside the child div there will be a back button to make that div disappear again (using JS).
Any help is greatly appreciated!!! Thanks!
put the child element width: 100%; , then it will take the exact width of parent element. After that, you can include jQuery to fadeIn/fadeOut the child element and manipulate it as you wish in javascript codes.
You can try by giving width 100% and position relative to columnChild, like below.
.columnChild {
width:100%;
float: left;
margin-right: 15px;
margin-bottom: 4%;
visibility: hidden;
position: relative;
background: #FFF;
}
Note: Position relative will help to adjust the position relative to the parent position and width 100% will help to make the same width as the parent div.