W3.CSS Positioning
Fixed and Floating
Keep a bar visible while scrolling, or let text flow around a floating box.
Fixed elements stay in place relative to the viewport.
Floated elements sit to one side of their container and allow following text to flow beside them.
Fixed Top Position
Use w3-top to fix an element at the top of the viewport.
The element normally fills the viewport width and stays visible while the page scrolls.
Open the Try-it example and scroll the result area to see the effect.
Example
<body class="w3-container" style="padding-top:64px"> <header class="w3-top w3-container w3-teal"> <p>Fixed top bar</p> </header> <div style="min-height:150vh"> <h2>Page Content</h2> <p>Scroll the page to see the fixed bar stay in place.</p> </div> </body>Try it Yourself »
The body padding leaves space below the fixed bar.
The tall content area makes the example long enough to scroll.
Fixed Bottom Position
Use w3-bottom to fix an element at the bottom of the viewport.
Scroll the Try-it example and watch the bar stay at the bottom.
Example
<body class="w3-container" style="padding-bottom:64px"> <footer class="w3-bottom w3-container w3-teal"> <p>Fixed bottom bar</p> </footer> <div style="min-height:150vh"> <h2>Page Content</h2> <p>Scroll the page to see the fixed bar stay in place.</p> </div> </body>Try it Yourself »
Bottom padding lets the final page content scroll clear of the fixed bar.
Reserve Space for Fixed Elements
Fixed elements do not reserve space in the normal page layout.
Without extra space, a fixed bar can cover the content behind it.
Add padding to the body or the page content container to make room.
This example reserves 64px at both the top and bottom.
Example
<body class="w3-container" style="padding-top:64px;padding-bottom:64px"> <header class="w3-top w3-container w3-teal"> <p>Fixed top bar</p> </header> <footer class="w3-bottom w3-container w3-teal"> <p>Fixed bottom bar</p> </footer> <div style="min-height:150vh"> <h2>Page Content</h2> <p>The body padding leaves room for the fixed bars.</p> </div> </body>Try it Yourself »
Choose padding that is large enough for the actual height of your fixed bar.
If a bar becomes taller because its content wraps, the reserved space must also increase.
Float Left
Use w3-left to float an element to the left side of its container.
Following text can flow beside the element and continue below it.
Floating box
A floating box lets the following text use the space beside it.
As you resize the window, the text wraps around the box and continues below it.
Example
<div class="w3-container w3-border" style="max-width:500px">
<div class="w3-panel w3-left w3-blue w3-margin-right" style="width:120px;height:100px">
<p>Floating box</p>
</div>
<p>A floating box lets the following text use the space beside it.</p>
<p>As you resize the window, the text wraps around the box and continues below it.</p>
</div>
Try it Yourself »
The box has a fixed width and height so the text-wrapping effect is easy to see.
Its right margin creates space between the box and the text.
Float Right
Use w3-right to float an element to the right side of its container.
The text now flows along the left side of the box.
Floating box
A floating box lets the following text use the space beside it.
As you resize the window, the text wraps around the box and continues below it.
Example
<div class="w3-container w3-border" style="max-width:500px">
<div class="w3-panel w3-right w3-blue w3-margin-left" style="width:120px;height:100px">
<p>Floating box</p>
</div>
<p>A floating box lets the following text use the space beside it.</p>
<p>As you resize the window, the text wraps around the box and continues below it.</p>
</div>
Try it Yourself »
The left margin creates space between the box and the text.
Resize the Try-it result area to see the text adjust.
Floating an element is different from aligning its text.
Use w3-left-align or w3-right-align when you only want to change text alignment.
Floating Left and Right
The w3-left and w3-right classes can also float elements to
opposite sides.
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red w3-padding">Left</div>
<div class="w3-right w3-blue w3-padding">Right</div>
</div>
Try it Yourself »
Contain Floated Elements
A parent containing only floated elements can collapse in height.
Use w3-clear on the parent to make it contain its floated children.
Compare the red borders below.
Without w3-clear
With w3-clear
Only the second parent border extends around both floating boxes.
Example
<h3>Without w3-clear</h3> <div class="w3-border w3-border-red"> <div class="w3-left w3-blue w3-padding">Left</div> <div class="w3-right w3-blue w3-padding">Right</div> </div> <!-- Keep the next example below the preceding floats. --> <div style="clear:both"></div> <h3>With w3-clear</h3> <div class="w3-border w3-border-red w3-clear"> <div class="w3-left w3-blue w3-padding">Left</div> <div class="w3-right w3-blue w3-padding">Right</div> </div>Try it Yourself »
The separate clear:both element keeps the second comparison below the first pair of floats.
Important
All W3.CSS classes such as w3-container, w3-panel,
w3-row, and w3-cell already contain their floated children.
Using w3-clear with classes other than w3-left and
w3-rigth is unnecessary.
Positioning Classes
| Class | Description |
|---|---|
| w3-top | Fixes an element at the top of the viewport, with width:100% by default. |
| w3-bottom | Fixes an element at the bottom of the viewport, with width:100% by default. |
| w3-left | Floats an element to the left side of its container. |
| w3-right | Floats an element to the right side of its container. |
| w3-clear | Makes a parent contain its floated children. |
Note
For flexible column layouts, see W3.CSS Flexbox and W3.CSS Grid.
