The World Wide Web Consortium (W3C) is the primary standards organization for the World Wide Web (WWW). These standards include specifications for accessibility across a variety of website aspects, including Cascading Style Sheets (CSS), which is a style sheet language for describing the presentation of a document written in a markup language. The current CSS specification defines a float as “a box that’s shifted to the left or right on the current line.” Text and other in-line images flow around the CSS floats, making the pages more adaptable for different size screens. Thusly, web developers often use CSS floats to ensure mobile accessibility, though this technique can be more challenging for images.
The solution to properly displaying floated images requires an understanding of the Float and Overflow properties.
Float
The use of CSS floats to properly display images requires an understanding of the float property. The float property specifies if and how an element should be positioned within its parent element. The other content inside the parent element will wrap around the floating element. The most common use of floats is to wrap text around an associated image. For example, the following image declaration specifies that the image should float to the right of the text within the image’s container:image { float: right;}
Similarly, the following declaration causes the image to float to the left of the text:image { float: left;}<br
Overflow
The overflow property specifies what happens when content overflows its container. It uses the following syntax:overflow: value
Value is a placeholder for one of the following:
- auto
- hidden
- inherit
- initial
- scroll
- visible
Problem
Floating elements can result in display problems as shown in the following example:<!DOCTYPE html><html><head><style>div { border: 1px solid #000000;}.image1 { float: right;}</style></head><body><p>The Microsoft logo is taller than its containing element. This image is floated, so it overflows its container.</p><div><img class="image1" src="https://assets.onestore.ms/cdnfiles/external/uhf/long/9a49a7e9d8e881327e81b9eb43dabc01de70a9bb/images/microsoft-gray.png" alt="microsoft.com" width="100" height="100">This is test text.</div></body></html>
The Microsoft logo in the above example floats to the right. It’s larger than its container, so it overflows the container.
Solution
The solution to this problem is to add an overflow auto property to the containing element as follows:.overflow_fix { overflow: auto;}
The declaration above creates a class named overflow_fix, and sets its overflow property to auto. This class can then be added to the image in the example, which places the image inside its container. The following example shows this fix with the changes in bold:<!DOCTYPE html><html><head><style>div { border: 1px solid #000000;}.image1 { float: right;}.overflow_fix { overflow: auto;}</style></head><body><p >Fix this problem by declaring an overflow_fix class with <b>overflow: auto</b> and add it to the containing element.</p><div class="overflow_fix"><img class="image1" src="https://assets.onestore.ms/cdnfiles/external/uhf/long/9a49a7e9d8e881327e81b9eb43dabc01de70a9bb/images/microsoft-gray.png" alt="microsoft.com" width="100" height="100">This is test text.</div></body></html>
Considerations
This fix sets the overflow property of the container to auto, which adds a scroll bar to the container if the content is clipped. This method will also work with overflow set to the hidden or scroll. The hidden value makes the clipped content invisible, while the scroll value adds scroll bars whether content is clipped or not.
Some browsers such as Internet Explorer on Windows and Opera require the container to have a declared height or width for this fix to work properly. For example, an overflow setting of auto will cause Explorer on Mac to always display scroll bars, whether they’re needed or not. The problem of displaying overflow content can be largely avoided by ensuring that the total width of the floated elements in a container are always less than the width of the container.
