start learning
Image 1

CSS Layouts: Floats and Positioning

CSS Layouts Floats and Positioning are techniques used to control the positioning and arrangement of elements on a web page.


Floats :

The CSS float property allows elements to be floated to the left or right of their normal position. Floating an element removes it from the normal document flow, allowing other content to flow around it. Floats are commonly used for creating multi-column layouts, such as magazine-style designs. The float property can be set to "left", "right", or "none" to control the positioning of an element.

Positioning :

CSS positioning provides more precise control over the placement of elements on a web page. There are different positioning schemes available, including "static", "relative", "absolute", and "fixed".

These techniques, floats, and positioning, provide flexibility in designing web page layouts and allow elements to be precisely positioned and aligned according to specific requirements.


Floats Example

Step 1: use our free live html editor to test the code


<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
        

  .box {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: lightblue;
  }


Positioning Example:

Step 1: use our free live html editor to test the code


<div class="container">
  <div class="box" style="top: 50px; left: 50px;">Box 1</div>
  <div class="box" style="top: 100px; left: 200px;">Box 2</div>
</div>

  .container {
    position: relative;
    width: 400px;
    height: 300px;
    background-color: lightgray;
  }

  .box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }

Preview :
Box 1
Box 2

These examples showcase basic usage of floats and positioning. Remember that there are more advanced techniques and properties available to create complex layouts using these concepts.