Fixed div and floating div

Fixed div and floating div

There are many ways to align div on page. Even you can fix any element at any position on page.

To make div fixed at any position you have to add position:fixed attribute in CSS as shown in below example. When user scrolls the page horizontally or vertically, the div position will not be changed. It keeps showing at given position as it is. This is the benefit  of showing fixed position.

Note Some advertisers don’t allow you to put the ad code in fixed div’s. But it is allowed in case where you are not overlapping your div on your content of the page.

Align Div at Top Left Corner with Fixed Position Example

<div style=”top:10px;left:10px;position:fixed” > This is Top Left Div element with Fixed position</div>

Align Div at Top Right Corner with Fixed Position Example

<div style=”top:10px;right:10px;position:fixed” > This is Top Right Div element with Fixed position</div>

Align Div at Bottom Left Corner with Fixed Position Example

<div style=”bottom:10px;left:10px;position:fixed” > This is Top Left Div element with Fixed position</div>

Align Div at Bottom Right Corner with Fixed Position Example

<div style=”Bottom:10px;Right:10px;position:fixed” > This is Bottom Right Div element with Fixed position</div>

You can copy above div element code and open in browser to get it tested.

Now, You may want to use absolute position. Let’s see div absolute position example.

<div style=”top:10px;left:10px;position:absolute” > This is Top Left Div element with Fixed position</div>

The above code will put the div from top 10px and left 10px. It takes your browser border as a reference.

Div Float Example

<div style=”top:10px;left:10px;float:left;” > This is Top Left Div element with Fixed position</div>

Similarly, you can change the floating position to right.

Tags: