I am new to css. I am wondering why when I change the positioning of the div element to absolute, the width of the div element changes? Tried it out in Chrome v25.0.1364.172m and IE9, both have the same outcome.
Simple example:
<!doctype html/>
<html>
<head>
<title>test</title>
<style>
div {
position:relative;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
Because absolutely positioned elements do not behave as block level
elements and do not flow after each other like normal a<div>does.
You will need to set a width and a height for a div that is absolutely positioned, depending what it contains.
Your absolutely positioned element will position relative to the first parent element it is in. So, a simple example:
A simple 'gotcha' is not setting the parent element to have position: relative;
<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">
<!-- I'm a child of the above parent element -->
<div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
I'm positioned absolutely to my parent.
</div>
</div>
Like SMacFadyen said, the most likely cause is missing position relative in the container.
However, if the container is in position relative and has a small width and the inner content in absolute, when you position the inner content using left or right its content might break into multiple lines. In this scenario you will want to change the white-space property to nowrap or some other option that better suits your needs.
Because the element, which you give absolute position take the width from his parent and didn't behave as a block element.
Related
Context: When the position:absolute <div> is directly in <body>, and there is a <div> as a sibling of it as in the JSFiddle.
Question: Why the position:absolute <div>does not overlap with its siblings when the top property is not explicitly set.
To my understanding but may be incorrect, if a <div> is set to be position:absolute, it will be positioned relative to body if none of its parents and parents' parents is set to be position:relative. So the top
propery of the position:absolute <div> should default to the body origin and the two divs should overlap.
The code is here:
#box_1 {
width: 200px;
height: 200px;
background: green;
}
#box_2 {
position: absolute;
left: 200px;
width: 200px;
height: 200px;
background: blue;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box_1"></div>
<div id="box_2"></div>
</body>
</html>
Updated answer:
It is because the default top value is auto so it lets the browser calculate the top edge position.
From MDN:
For absolutely positioned elements, the position of the element is
based on the bottom property, while height: auto is treated as a
height based on the content; or if bottom is also auto, the
element is positioned where it should vertically be positioned if it
were a static element.
So it will be positioned according to the bottom or the top, but as there is none in your example, it is positioned as a static element.
Old answer:
Because you set bottom: 0; so it sticks the bottom.
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
I have a parent div that has position: relative and his child has position: absolute. Such positions is a must. The problem is the parent does not stretch to the height of the child. The question is how to make it stretch to the height of the child?
The mark-up is similar to this:
<!DOCTYPE HTML>
<html>
<head>
<style>
.parent {
position: relative;
border: solid 1px red;
}
.child {
position: absolute;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Hello World!</div>
</div>
</body>
</html>
Add overflow:hidden to your parent.
Edit: My mistake, this will only work if the children are floating. This cannot be achieved if the child is position absolutely. When you absolutely position an element, you're taking it out of the document flow. As far as positioning is concerned, that element is no longer a "child", even though semantically it still is.
give a height:100% to both the child and the parent.
Unfortunately, I don't think there's a way to do it, without using Javascript.
edit: Perhaps if you show why they need to be position:relative and position:absolute, we can come up with a way to remove that restriction so that what you want is possible.
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.
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.