How To Make Floating Images Using CSS?
Last Updated :
19 Sep, 2024
CSS is used to create floating images to allow text to wrap around the image or to position an image a certain way about other content. You can make the floating images in the CSS by using the 3 different ways.
Prerequisites
1. Floating Image with Text Wrapping
The float property can be used to make an image float to one side, with text wrapping around it. This is one of the most common, traditional methods for composition, where you have elements, mostly images floating with text wrapping around them.
Example:
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Floating Images Example</title>
</head>
<body>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240910092324/Float.png"
height="50" id="img1" />
<p>
CSS, or Cascading Style Sheets, is the language used to style and enhance
HTML documents. It defines the presentation of HTML elements on a web
page, enabling changes to fonts, colors, sizes, spacing, column layouts,
and animations.
</p>
<p>
CSS, or Cascading Style Sheets, is a language used to style and enhance
websites. It controls how HTML elements—such as text, images, and
buttons—are displayed on a webpage. With CSS, you can adjust font sizes
and colors, add backgrounds, and manage the layout, transforming a basic
webpage into a visually appealing and user-friendly experience. CSS also
simplifies layout management across multiple web pages by using external
stylesheets stored in CSS files
</p>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240910092324/Float.png"
height="50" id="img2" />
<p>
CSS border is a line that surrounds an HTML element, providing a visual
separation between the element and its surroundings. Borders can be styled
in various ways
</p>
<p>
The simplest way to add a border to an element is by using the border
shorthand property
</p>
</body>
</html>
/* index.css */
body {
border: 2px solid;
display: flow-root; /* Creates a new block formatting context */
}
#img1 {
float: left; /* Floats the first image to the left */
margin-right: 10px; /* Adds space to the right of the image */
}
#img2 {
float: right; /* Floats the second image to the right */
margin-left: 10px; /* Adds space to the left of the image */
}
/* Clearfix to ensure the container wraps floated elements */
p {
clear: both; /* Ensures paragraphs don't overlap floated images */
}
Output:
How To Make Floating Images Using CSS2. Floating Image with CSS Grid
If your layout is a bit more complex, then both CSS Grid and Flexbox give you finer control of the positioning of floating images.
Example
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Floating Image with Grid Example</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item image-item">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240910092450/Grid.gif"
alt="Floating Image" />
</div>
<div class="grid-item text-item">
<p>
Using border property, we can provide width, style, and color to all
the borders separately for that we have to give some values to all
sides of the border.
</p>
<p>
The CSS border-radius property rounds the corners of an element’s
border, creating smoother edges, with values specifying the curvature
radius.
</p>
</div>
</div>
</body>
</html>
/* index.css */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
}
.grid-item img {
width: 100%;
height: 150px;
border-radius: 2px; /* Optional: adds rounded corners */
}
.text-item {
padding: 10px;
}
Output
How To Make Floating Images Using CSS3. Floating Image with Positioning
You can also position an image in a specific location by using CSS positioning.
Example
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Floating Image with Positioning</title>
</head>
<body>
<div class="container">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240910092324/Float.png"
class="positioned-image"
alt="Floating Image" />
<p>
The CSS border-radius property rounds the corners of an element’s
border, creating smoother edges, with values specifying the curvature
radius.
</p>
<p>
Using border property, we can provide width, style, and color to all the
borders separately for that we have to give some values to all sides of
the border.
</p>
</div>
</body>
</html>
/* index.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative; /* Establishes a positioning context for absolutely positioned elements */
padding: 10px;
}
.positioned-image {
position: absolute; /* Enables positioning the image */
top: 20px; /* Adjusts the vertical position */
right: 20px; /* Adjusts the horizontal position */
width: 200px; /* Increased image width */
height: auto; /* Maintain aspect ratio */
margin: 0; /* Resets any default margin */
}
Output
How To Make Floating Images Using CSS
Similar Reads
How to float three div side by side using CSS? Aligning three <div> elements side by side is a fundamental layout technique in web design. Whether you're creating a profile card section, a features row, or a three-column layout for a homepage, placing elements in a horizontal line is a common requirement.While the traditional approach reli
3 min read
How to float three div side by side using CSS? Aligning three <div> elements side by side is a fundamental layout technique in web design. Whether you're creating a profile card section, a features row, or a three-column layout for a homepage, placing elements in a horizontal line is a common requirement.While the traditional approach reli
3 min read
How to add image refaction using CSS ? This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mi
2 min read
How to Add Visual Effects to Images using CSS? CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visua
2 min read
How to create Responsive Floating Elements using CSS ? The Responsive Floating Elements are useful for adaptable layouts on different devices. It ensures a seamless user experience by adjusting the size and arrangement of cards based on the screen size. The float property is employed to arrange the cards horizontally, making them responsive on various d
3 min read
Apply Glowing Effect to the Image using HTML and CSS While surfing most of the websites you have seen some special effects which can be seen on various images while putting your cursor over them. So, in this article, we are going to implement the same. We can use such images as a card for our website. In this article, you’re going to learn how to app
2 min read