All posts by Mr Choudhury

About Mr Choudhury

Mr Choudhury, a professional PHP Website Developer, mobile app & java developer & an expert on HTML5, CSS3, JavaScript, jQuery PHP WordPress. He is a Computer Science Graduate and Masters in Technology in Computer Science. He is highly involved in responsive website designing, mobile app development, Java system development & SEO consultancy for 15 years. Call Mr. Choudhury (+91).9163111390 or visit his website http://www.bikramchoudhury.org

CSS circles – CSS3 concentric Circles

This is a CSS tutorial series to draw concentric circles using pure CSS. Here Web Developer Mr Choudhury shown with free source code examples, the easiest ways to draw CSS circles & concentric circles with the help of pure CSS. Here DIV represent each circle having border-radius:50%;.

About this tutorial & author : Also Mr. Choudhury shown the formula, and he described and explained here developed by the renowned CSS layout expert and css template designer for web page layouts.

Continue reading CSS circles – CSS3 concentric Circles

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

  1. 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.
  2. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
  3. Normally absolutely positioned elements are positioned by the top and left property assigned to them.
  4. This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
  5. Absolute positioning always works w.r.t the container block of this absolutely positioned element.
  6. Absolute elements create a new coordinate system for child elements inside them.
  7. 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.

Continue reading Absolute Position (CSS)

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