Semantic-UI Header Floating Variations

Last Updated : 16 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic-UI Header provides a short summary of content and it offers us different variations of the header, like Dividing, Block, Attached, Floating, Text alignment, Colored, and Inverted variants. In this article, we will learn about the Floating variant of the header. This variant is used to float our header to the left or the right of the screen.

Semantic-UI Header Variations Floating Variant Classes:

left floated: This class is used to float the header on the left side of the screen.
right floated: This class is used to float the header on the right side of the screen.

Syntax:

<element class="ui right floated header">
    ...
</element>

The below example illustrates the Semantic-UI Header Variations Floating Variant:

Example 1: In this example, we will float the header on the right.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <strong> 
          Semantic UI Header Variations Floating 
        </strong> 
        <br><br> 
    </center> 
    <div class="ui clearing segment"> 
        <strong class="ui right floated header"> 
            GeeksforGeeks <sub>Right Floated</sub> 
        </strong> 
        <br><br> 
        <p> 
            With the idea of imparting programming 
            knowledge, Mr. Sandeep Jain, an IIT 
            Roorkee alumnus started a dream, 
            GeeksforGeeks. Whether programming excites 
            you or you feel stifled, wondering how to 
            prepare for interview questions or how to 
            ace data structures and algorithms, 
            GeeksforGeeks is a one-stop solution. 
        </p> 
  
    </div> 
</body> 
  
</html>

Output:

Semantic-UI Header Floating Variations

Example 2: In this example, we will float the header on the left.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <strong> 
          Semantic UI Header Variations Floating 
        </strong> 
        <br><br> 
    </center> 
    <div class="ui clearing segment"> 
        <strong class="ui left floated header"> 
            GeeksforGeeks <sub>Right Floated</sub> 
        </strong> 
        <br><br> 
        <p> 
            With the idea of imparting programming 
            knowledge, Mr. Sandeep Jain, an IIT 
            Roorkee alumnus started a dream, 
            GeeksforGeeks. Whether programming excites 
            you or you feel stifled, wondering how to 
            prepare for interview questions or how to 
            ace data structures and algorithms, 
            GeeksforGeeks is a one-stop solution. 
        </p> 
  
    </div> 
</body> 
  
</html>