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
Related
Does the position: absolute remove the element completely from the page's document flow or just removes it from the parent container? and if it gets removed from the page's document flow doesn't that hurt the accessibility of the website? I mean wouldn't that make people who use assistive devices to browse your website unable to find out about that specific element?
I tried position: absolute on an element and it got removed from the page and now I'm having concerns about the accessibility of my page.
If you are not seeing an absolutely positioned element, you likely do not have a width and height set in its style or there is something going on with its left, right, top or bottom positioning (non existent?) that is causing the element to not be seen.
i tried position: absolute on an element and it got removed from the
page and now i'm having concerns about the accessibility of my page.
Have you right clicked on the page where you expect the element to show up and looked in your browsers inspector to see if the element is in fact there or not?
I have included a few examples of position absolute using parent/child elements with varying styling below. Also I have included relevant links to MDN and W3 that I think will help in your understanding of positioning and its relationship to block formatting and what the Document Object Model (DOM) is.
MDN on position
MDN on Block Formatting Context
W3 on DOM
.relative {
position: relative;
}
.absolute {
position: absolute;
left: 75px;
top: 75px;
}
.parent1 {
width: 200px;
height: 200px;
background: teal;
}
.parent2 {
width: 200px;
height: 200px;
background: orange;
}
.parent3 {
width: 200px;
height: 200px;
background: green;
}
.parent4 {
width: 200px;
height: 200px;
background: purple;
}
.parent5 {
width: 200px;
height: 200px;
background: yellow;
}
.parent6 {
width: 200px;
height: 200px;
background: grey;
}
.child1 {
height: 50px;
width: 50px;
background-color: lightblue;
}
.child2 {
/*this element will not show up as there is no width or height set*/
background: red;
}
.child3 {
/*you will only see the content within this element if present*/
background-color: lightgreen;
}
.child4 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
width: auto;
height: auto;
left: 300px;
top: 200px;
background-color: rgba(45,67,244, 0.2);
}
.child5 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
left: 300px;
right: 400px;
top: 300px;
bottom: 400px;
/* Note there is no background showing on this element! as height and wiodth are not defined*/
background-color: rgba(90,150,90, 0.2);
}
.child6 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
height: 100px;
width: 100px;
top: 400px;
left: 300px;
/* Note there is no background showing on this element! as height and wiodth are not defined*/
background-color: grey;
border: 1px solid black;
}
<b>NOTE: This snippit will be best viewed in full screen mode</b>
<div class="relative">MDN documentation on <i><b>position: absolute:</b></i> The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
<i><b>NOTE:</b></i> The element establishes a new block formatting context (BFC) for its contents. Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto.
</div>
<div class="parent1 relative">Parent 1:
You can see the absolute positioned element as it has left/right, width and height set
<div class="absolute child1">absolute
</div>
</div>
<div class="parent2 relative">Parent 2: You can NOT see the absolute positioned element as its width and height are not set, nor doies it have any content, however, if you look in your console inspector for your browser, you will see the element along with its css selectors within the HTML
<div class="absolute child2">
</div>
</div>
<div class="parent3 relative">Parent 3: You will only see the content and its direct BG within this absolute element as height and width are not present
<div class="absolute child3">absolute
</div>
</div>
<div class="parent4">Parent 4: This parent element does not have position relative, lets see where the child resides
<div class="absolute child4">Child 4, parent 4, absolute, parent not relative, this set to the div container that is positioned relative
</div>
</div>
<div class="parent5">Parent 5: This parent element does not have position relative, lets see where the child resides
<div class="absolute child5">Child 5, parent 5, absolute, parent not relative.
</div>
</div>
<div class="parent6">Parent 6: This parent element does not have position relative, lets see where the child resides
<div class="absolute child6">Child 6, parent 6, absolute, parent not relative
</div>
</div>
Here is the demo:
http://jsfiddle.net/53eP6/
<div class="container">
<span class="small">small text</span>
<div class="big">Big elements to be ignored</div>
</div>
The right element is the one I want to ignore ( in real-life experience, this might be some irregular size imgs)
So the parent element will have a fix height (by its padding and children's height ), rather than expand to fit the height of the big element that I want to ignore.
Simply floating the element would be ideal as it will still retain padding information from the parent to align top part correctly with the sibling inline element.
Fiddle: http://jsfiddle.net/Varinder/eg7DW/1/
Edit
fixed height on .container element
.container{
padding: 10px;
background:green;
height:20px
}
Fiddle: http://jsfiddle.net/Varinder/eg7DW/3/
.container {
position: relative;
display: inline;
}
.big {
position: absolute;
top: 0px;
left: 100%;
}
http://jsfiddle.net/e3vMn/
How to position a div horizontally?
I used "Float:left" that works. what i need is , want to position that div based on a value( like margin) that value is the distance between the outer divs and inner div that is illustrated in image
I used the margin-left but it compares the distance between the previous child ,instead of the parent(outer div)
I tried the "left" $(area).css(left: LeftVal); that is also not working as expected. In my case I cant use the offset too.
How to achieve this ?
Note: The 100pxs in the image is for a example, i might use different values.
Set the positions as follows :
parent(container) {position:relative;}
child1 {position:absolute;left:100px;top:0;}
You can use position:absolute to position elements absolutely with respect to the parent.
<style>
.outer {
background: blue;
width: 200px;
height: 200px;
position: relative;
}
.inner {
position: absolute;
float: left;
background: red;
height: 200px;
}
.inner1 {
margin-left: 20px;
}
.inner2 {
margin-left: 120px;
}
</style>
<div class="outer">
<div class="inner inner1">Inner1</div>
<div class="inner inner2">Inner2</div>
</div>
You can choose not to use float if you don't want the div to resize based on the content. Instead, you could set the width manually for each div.
Let's say I have a DIV that's styled as a square, and it has squares (DIV) inside of it. I'd like the squares inside the main DIV to stack in the lower right. I can use float: right to to get them on the right edge, but how do I make them stack at the bottom rather than the top?
Should you not find a good CSS solution, jQuery can easily handle this:
Fiddle
$('.inner').each(function(i) {
$this = $(this);
var bottomPos = ($this.outerHeight())*i;
$this.css('bottom', bottomPos);
});
HTML and CSS
<style type="text/css">
#outer {
width: 400px;
height: 600px;
background-color: #eee;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
position: absolute;
right: 0;
}
</style>
<div id="outer">
<div class="inner">One</div>
<div class="inner">Two</div>
<div class="inner">Three</div>
<div class="inner">Four</div>
</div>
To get a child to stick to the very bottom of a container, set the position:relative and bottom:0px. However this will not stack them, you'd have to set the bottom to another value for a child to be above another child. You could use javascript or jquery to dynamically fit them if the sizes are variable like this:
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
Note: 5 is just for padding
You can use display:table-cell with vertical-align:bottom
Here's a good tutorial on using "table-cell" layout:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Depending on what you mean by "stack at the bottom", you can achieve this with the use of an inner container div that is aligned at the bottom. Then these child squares can be float right inside of this container div, causing them to stick to the bottom of the main div, like so:
<div id="main_div" style="position: relative; height: 500px; width: 500px;">
<div id="container_div" style="position: absolute; bottom: 0; right: 0;">
<div class="right_floated_square">Square 1 Content</div>
<div class="right_floated_square">Square 2 Content</div>
<div class="right_floated_square">Square 3 Content</div>
</div>
</div>
What this would do is flow these squares right to left at the bottom of the main div. However, these child squares would still flow top to bottom inside the container div. If you wanted them to vertically flow in reverse (bottom up), I'm not sure if that would be possible without some complex layout javascript.
Obviously, the exact styling of "right_floated_square" has been removed for brevity.
Here is a pure css version: http://jsfiddle.net/zkhWA/1/
Basically place your little squares in another absolutely positioned element that is grounded to the bottom right corner of the big square using:
position: absolute;
right: 0px;
bottom: 0px;
Then make all the little squares float right:
float: right;
Don't forget to apply position:relative to the big square.
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.