Press "Enter" to skip to content

CSS to Make Div Element Float Right

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: