CSS float is a property used for positioning and aligning content within a container.
When an element is floated, it is moved to one side of its container, allowing other elements to flow around it. Float is commonly used to create layouts with multiple columns or to position images within text.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="content">
<img src="trol.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This is a basic HTML code that includes an image and two paragraphs in a div container.
img {
float: right;
}
.content {
width: 600px;
border: 2px solid black;
padding: 5px;
margin: 5px;
}
The CSS code we provide floats the image to the right using the float property with a value of right.
This causes the image to be positioned to the right of the text content that comes before it in the HTML. The .content class is used to style the container element that holds the image and text.
It sets a width of 600px, adds a black border of 2px thickness, and sets a margin and padding of 5px. This provides some space between the content and the edges of the container element.
No comments:
Post a Comment