CSS: Positioning Content

Positioning with floats.

Floats allow elements to appear next to, or apart from, one another. They provide the ability to build a natural flow within a layout and allow elements to interact with one another based on their size and the size of their containing parent. The float property accepts a few values; the two most popular values are left and right, which allow elements to be floated to the left or right of their parent element.

img {
  float: left;
}

Overflow technique

In this technique, we use CSS overflow property to the parent containing floated elements and set the value auto. Overflow property comes with a few different values, most popular are auto, hidden, scroll, etc.

The overflow property has the following values:

• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

Clearfix Technique

In this method, we apply a class to parent element containing floated elements and then we define some sort rules to that class in CSS. One of the most popular class name that generally developer use for this purpose is ‘clearfix’ or ‘cf’.

<header>..........</header>
  <div class="parent clearfix">
    <section>..........</section>
    <aside>..........</aside>
    <div class="clear"></div>
  </div>
  <footer>..........</footer>
  section {
    float: left;
  }
  aside {
    float: right;
  }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }

Creating reusable and flexible layouts

We create a reusable layout consists of modular classes that can be reused again and again. In a real website, it’s not just about creating reusable layouts but also creating a flexible layout. A flexible layout has flexible containers and columns and those flexible containers and columns are made with percentages or flexible units so that they can have flexibility in every size of the screen.

Responsive websites consists of flexible layouts which can adapt any screen sizes. A flexible container does not have a fixed width so instead of applying width we apply max-width. The width property prevents the layout to go narrower. So whenever we decrease the size of the screen the container will be having a fixed width and we will get a horizontal scrollbar which is not good for smaller devices. But the max-width property will allow the container to become narrower as the screen sizes reduce. This is important for smaller devices like mobile or tablet.

.container {
    max-width: 992px;
    margin: 0 auto;
    padding: 0 30px;
  }

Working with percentages

Percentages are a relative unit in CSS represented by %. Percentage unit work in relation to another object in a layout. For example, let’s say we have a column of width 50% in our page, now let’s see how it works

<section>
    <div class="column">......</div>
  </section>
  section {
    width: 1000px;
  }
  .column {
    width: 50%;
  }

Here,

The width of column 50%, now the column will look for its parent width in which it is nested and then its width will be calculated. Here, the section is having 1000px width so the column width will be 500px

In percentage. If the parent’s width decreases or increases accordingly the column’s width will also decrease or increase but it will always remain 50% of its parent.

Percentage units are always based on the parent element’s size. So whenever we define the things in percentage it will always look for its parent.

Universal Selector

The * selector selects all elements. CSS universal selectors select any type of elements in an HTML page. An asterisk ( i.e. “*” ) is used to denote a CSS universal selector. This is useful when you want to set a style for all the elements of an HTML page or for all of the elements within an element of an HTML page.

*, *:before, *:after {
	box-sizing: border-box;
}

The position Property

The positionproperty specifies the type of positioning method used for an element (static, relative, fixed and absolute).

The position Property

The position property specifies the type of positioning method used for an element.

There are four different position values:

• static
• relative
• fixed
• absolute

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page, It does not accept any box-offset property. It means each and every element in a page is a static element by default which cannot be moved using left, right, top, or bottom property.

position: relative;

The relative value is somewhat different from the static one because it accepts all the box-offset properties. We can move the relatively positioned element using box-offset properties.An element with position: relative; is positioned relative to its normal position.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.