I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.
#banner {
width: 700px;
height: 90px;
top: 60px;
left: 178px;
overflow: hidden;
text-align: center;
display: table-cell;
vertical-align: bottom;
position: relative;
}
<div id="banner">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?
My current solution is:
<div id="banner">
<table width="100%" height="100%"><tr><td valign="bottom" align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</td></tr></table>
</div>
But I do not like this solution.
Short answer:
Change
top: 60px;
to
bottom: 60px;
Long answer:
The declaration position: absolute takes your element out from wherever it is and place it relative to innermost element that is not declared static. In no longer participate in the alignment of any other element, hence it no longer serve as table-cell (the declaration has no effect). Additionally, declaration such as top: 10px means to place it that much distance from the top of that containing element.
Declaring an element as position: relative makes declaration such as top: 10px means 'move the element 10px from the top from the current position'. It is possible for elements declared relative to overlap with other elements, although you should remember that the original position still determines the arrangement of other elements.
I hope this answer your question.
You could also try setting a position:relative; container, which makes the banner (the #banner position:relative; and the img position:absolute) then set the absolute position to be bottom:0, aligning it to the bottom of the container. If it's the whole page, just set the width and height of the container to 100%, and remove extra padding/margin on the body or on the div.
Related
Here is the jsfiddle to illustrate my question.
I have a floated div with no height (.card). It contains a nested div (.image) with an image. The image makes the bounding box of .card expand to wrap the image.
However, when I nest a second div (.text) inside .card as a sibling to .image and use negative margin-top to position .text in top of the image, the image no longer manages to expand the bounding-box of .card to match the bottom of the image. The bottom-boundary of .card instead creeps up and follows the bottom boundary of .text.
Why does not the image succeed in expanding its grand-parent any longer when .text is present?
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
</div>
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
<div class="text"></div>
</div>
img {
display: block;
}
.card {
border: 1px solid black; //shows where the bounding-box of this div is
width: 200px;
position: relative;
float: left;
}
.text {
width: 100px;
height: 100px;
background-color: red;
margin-top: -120px;
position: relative;
}
If m not wrong to get your point then you are missing position:absolute.
Remember you can fix position of inside element only when parent div is relative and inside element absolute.
UPDATED
This issue is occurring because you are trying to use .txt(child) inside .card(parent) with position relative but with wrong way. Remember whenever you are using position, parent should be relative and child will be absolute so child will move inside parent container without breaking the flow(in your case it is affecting the parent div and breaking the border) so to over come this issue use position:absolute on child and then you can use .txt class with ease.
Just change position: relative; to position: absolute; in .text class and you are done.
See here
i am trying to code an html with 2 divs inside a div.
There is a parent div with no width or height.. the width is the browser width and the height is not specified.
I want inside this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it.
Now i was trying to make it like this:
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
</div>
and the css like this:
#calendar {
margin: 0 auto;
position: relative;
overflow: hidden;
}
#calendar #list {
background: #f00;
position: absolute;
width: 250px;
left: 0;
top: 0;
}
#calendar #grid {
background: #0f0;
position: absolute;
left: 250px;
top: 0;
right: 0;
}
now the problem is, the parent div doesnt resize when i add content to the children divs
I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.
Thank you in advance,
Daniel!
Here's my solution -> http://tinkerbin.com/Z8mJmItU
Float the #list with its given width, then give #grid the same margin-left.
Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.
You need to specify a height if you are going to use absolute. Then it should work.
EDIT
use
position: relative;
on the child elements.
EDIT 2
Perhaps this post would help with what you are after? Div width 100% minus fixed amount of pixels
Don't use positioning, use float ... with your current method the parent will collapse and the only way to determine the required height of the parent, would be to calculate the height of the highest child element (typically, with JavaScript).
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
<div class="clear"></div>
</div>
... and the CSS ...
#calendar {
margin: 0 auto;
position: relative;
}
#calendar #list {
background: #f00;
float:left;
width: 250px;
}
#calendar #grid {
background: #0f0;
margin-left: 250px;
}
.clear{
clear:both;
}
This way the #calendar will adjust in height to the tallest child element. Also remember to remove the overflow rule.
... the above for the sake of being brief, you should probably look at using clearfix (by adding a class to #calendar) - read more here.
This question already has answers here:
Difference between style = "position:absolute" and style = "position:relative"
(10 answers)
Closed 5 years ago.
I'm reading this article about position, and I don't understand why in this example the relatively positioned div is affected by the BODY, yet the absolutely positioned box ignores it? Aren't they suppose to behave the same when they are positioned inside another element?
the CSS:
body {
display: block;
margin: 8px;
}
#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}
Basically you have four position states, which are as follows:
static (default)
relative
fixed
absolute
The difference between relative and absolute is that relative is "relative" to itself (left:15px will pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away form the left edge of the parent element.
This is actually a fascinating study and will help immensely in understanding web layout.
Here is the easy explanation of position: absolute and position: relative.
With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from body element otherwise it will take it's position from the nearest defined position element.
Below is the example.
In this case, 'div2' takes the position from 'div1' element.
<div id='div1' style="position: relative; left: 100px;top: 10px;">
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
In this case 'div2' takes position from body elements as no position is defined.
<div id='div1'>
<h1>This is the first position element</h1>
<div id='div2' style=" position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>
With relative position, an html elements can move from it's normal
position.Below is the example.
In this case it will move from it's postion 10px left and 10px below.
<div id='div2' style=" position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>
absolute is the best for doing the page layout. it should have the top left right and bottom imported by CSS. and the relative is done without any tag from CSS
In example shown:
well, for relative there is no top/bottom/left/right for relative, so it stays where it should stay. (body has its own margin and padding defined by browser, which you can override).
for absolute, we have top and left, so it goes a little up, as it ignore any other items.
The explanations and descriptions explained above are well but for a normal person or a beginner it is difficult to understand.
Its simple.
Relative: Relative is similar to no positioning. Even if you haven,t used relative , and you make a div appear just like this:
margin-left:10px;
It would move to the left having space of 10px;
And similarly if you do like this:
position:relative;
margin-left:10px;
It would be same as no relative was used.
And if absolute is used for some other div in same sequence:
position:absolute;
margin-left:10px;
The it would move a total of 10+10=20px margin-left.
Because 10px of the second div of absolute and 10 px of relative div id is added in it.
It is similar to doing:
#div1{
float:left;
margin-left:10px;
}
#div2{
float:left;
margin-left:10px;
}
I have following code with a div #letmeout in it. Due to the outer <div> having position:relative and overflow hidden; set, the #letmeout div is not displayed. I need to display #letmeout without modifying the outer <div>.
<div style="position: relative; overflow: hidden;">
<div id="letmeout" width="100%" height="1000px" style=".....">ok</div>
</div>
I tried adding an inline style background:red; position: absolute; z-index: 10000; color:blue; left: 0px; top: 0px; height:10000px; display:marker; overflow:auto; margin:0px; but #letmeout is still not shown. How can I do this without modifying the outer div and only using inline styles on #letmeout?
By assigning relative positioning to the parent you "locked" the sub (child) into the parent container.
If you really need a screen takeover (as your code suggests) #letmeout { position:fixed; } may help. Be warned though, fixed positioning doesn't act like absolute or relative. fixed elements take their position based on the viewport.
Check it out: http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning
You will also find explanations to your positioning and float options at that URL as well.
Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>