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
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.