Home
Products
Grids
Blog
Support
Donate
About
   

Everything you need to know about floating a div

Float left, float right. We all have to float a div, but unless you know the rules, things can get nasty.

The basics of floating divs

A simple example of how to float one or more divs.
CSS
HTML
Example

See the Pen Everything You Need to Know About Floating a Div by Tipue () on CodePen.

Let's break down the CSS.

The asterisk reset

The asterisk select all elements, and in this case, sets the box-sizing property to border-box, which means all padding and border values will be inside the set box size. This should be the default in every browser, but isn't.

The wrapper

The value auto in the margin property sets the left and right margins to the available space within the page, effectively creating a block that's centered and responsive.

The floated items

The CSS float property sets an item to the left or right of the container, allowing elements to wrap around it. The left value floats items to the left of the containing block, while the right value floats items to the right of the container.

Floated items with the Left value flow from left to right, while floated items with the right value flow from right to left.

In the clear

The clear property sets how elements following floated items behave. So clear with a value of both clears all the floats above. The easiest method is to use an empty div with a clear.

Floated divs & media queries

Floating divs are often used with other techniques, and in this example, media queries.
CSS
HTML
Example

See the Pen Floats, Max-Width & Media Queries by Tipue () on CodePen.

The image is floated left, and the text flows around it. The layout is made responsive via media queries.

Media queries

Media queries allow you to change the layout of your site according to the size of the viewport, that is for phones, laptops, tablets and the rest. In this example, for displays narrower than 700 pixels, we're clearing the left float value to none, setting the width of the image to fill the container and changing the margins. The aim is to make the section friendlier for smaller displays.
Latest & featured