CSS to Make Div Element Float Right

CSS to Make Div Element Float Right

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS / HTML
  • 4 mins read

In this tutorial, I am giving an example of CSS to make div element float right.

CSS to Make Div Float Right

For the below example, I am using floater id for the div element and the following is the CSS:

#floater {
    float: right;
    width: 300px;
    height: 250px;
    padding: 10px;
    margin: 10px;
    background: blue;
    color: white;
    overflow: auto;
}

Complete CSS Example for <head>:

<style> .relative {
    position: relative;
    width: 550px;
    margin: 10px;
    padding: 10px;
}

#floater {
    float: right;
    width: 300px;
    height: 250px;
    padding: 10px;
    margin: 10px;
    background: blue;
    color: white;
    overflow: auto;
}

</style>

Example <body>

<body>
    <div class="relative">
        <div id="floater">Floating element</div>
        <p>This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text.</p>
    </div>

</body>

Output

Floating element

This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text.

Float Advertisement Using Div Element

Suppose you want to put an advertisement in the floating div element, then put the ad JavaScript code in the div element. Below is an example:

<body> <div class="relative1"> <div id="floater1">Put here your ad code.</div> <p>This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text.</p> </div> </body>

Output




This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text. This is some dummy text.

 See also: