When container DIV collapses having multiple child DIV inside it. Here you will get a case study when container DIV has two child divs side by side they appears inside container DIV. Child DIVs are absolutely positioned inside a container DIV which is relatively positioned. Also know how to recover from the problem. Continue reading When container DIV collapses having multiple child DIV inside it
Category Archives: CSS Positioning
Vertical Centering Problem found in IE9 for side by side two DIVs
Only the following problem exists in Internet Explorer 9 (may be IE10), not in any other browser. So I suggest you to visit this page using Internet Explorer 9. You can try other versions also.
Continue reading Vertical Centering Problem found in IE9 for side by side two DIVs
Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’
How to vertically center a CHILD DIV inside a CONTAINER DIV of FIXED height. Child DIV height can be in Pixel or percentage of container DIV’s height.
Vertically center a DIV inside a container DIV element. The container can be relatively positioned. The child DIV should be absolutely positioned and its top, right, bottom, and left offset properties specify the element’s position w.r.t the container block (what the element is positioned relative to) and this value should be 0. So now use these properties to vertically center a DIV inside a container DIV element. Continue reading Vertical centering using CSS- when child DIV placed in a ‘container DIV of fixed height’
2 column DIV layout problem : container DIV collapses and Footer comes up
Here container DIV has two child DIVs. Container DIV is relatively positioned. After container DIV a footer DIV BOX exists which also relatively positioned. Inside container DIV there exists two column DIVs which are absolutely positioned. Left colummn is of 60% width of container and right column is of 30% width.
Continue reading 2 column DIV layout problem : container DIV collapses and Footer comes up
Absolute Position (CSS)
What is “position:absolute” in CSS ? To learn absolute positioning CSS property you must understand block level & inline elements, normal flow concept of CSS. You must know normal flow first, then learn absolute position concept.
Box model, Normal Flow > Absolute positioning
Absolute Positioning Explained
- An absolutely positioned element is removed from the normal flow. This positioning scheme applies to any element that has its position porperty absolute or fixed.
- This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
- Normally absolutely positioned elements are positioned by the top and left property assigned to them.
- This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
- Absolute positioning always works w.r.t the container block of this absolutely positioned element.
- Absolute elements create a new coordinate system for child elements inside them.
- This is an exellent property of ABSOLUTE POSITIONING : Use all four offset properties (TOP, LEFT, BOTTOM, RIGHT), and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself if there is no container.
CSS Clip Explained
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
Another good tutorial : http://reference.sitepoint.com/css/clip
Absolute positioned DIV, inside relative container
Mixing relative positioning and absolute positioning together
How to apply absolute positioning inside relative positioning container element explained in this example. Here the container is a DIV block with relative positioning and an absolutely positioned element (it is also a DIV block) will be placed inside this container DIV.
In this example we have placed a container DIV with Gray background which is relatively positioned and a pink DIV which is actually a child div inside contained div.
Continue reading Absolute positioned DIV, inside relative container
Box model, inline & block elements & normal flow
Know the Box Model
First you need to understand the CSS box model if you are in web design field, this is the first thing you need to learn web designing. When we say a <p> tag (Paragraph element) or DIV tag (DIV element) or Hyperlink (anchor tag <a>), then we always refer to these HTML elements’ box model.
Continue reading Box model, inline & block elements & normal flow
Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>
Horizontal centering TWO vertically placed child divs inside parent DIV
How to place vertically placed two child DIVs inside another PARENT DIV exactly horizontally centered.
PARENT DIV is of 400px width and height. Child is of 200px width and height. We have set the positioning property : RELATIVE of Parent div. That means inner DIVs inside parent will be placed relative to parent / container div.
Then we have placed a wrapper just outside of two vertical DIVs. Two child vertical DIVs are of margin: 0 auto , which places child DIVs with respect to WRAPPER divs.
We have tested the following codes in IE6,Opera 10, Firefox 4 and I hope it will work in other browsers too.
If you find out any problem then email me: bikramchoudhury@hotmail.com
Related Articles :
Horizontally centre a DIV block with respect to container DIV block
Horizontal Centering of (side by side placed Multiple Child DIV)s inside container DIV
HTML Source Code of the above topic, view picture
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal centering of two vertical divs of different width height</title>
<style>
.parent { height: 400px; width: 400px; background-color: green; position: relative;}
.wrapper { position: relative}
.content { height: 200px; width: 200px; background-color: yellow; margin:0 auto; }
.color_change_with_centering_text { height: 100px; width: 100px; background-color:#99FF33; color: red; text-align:center }
</style>
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="content">
Child block 1
</div>
<div class="color_change_with_centering_text content">
Child block</div>
</div>
</div>
</body>
</html>