Jaime R. Dizon
Jaime R. Dizon
Programming language:CSS
2021-05-19 21:27:29
0
Q:

float in css

Gerard H. Pille
Gerard H. Pille
Code: CSS
2021-02-11 20:36:52 
.myelement {
	float: left;
}
5
Archa
Archa
Code: CSS
2021-02-11 20:35:12 
The float property is a positioning tool in css that is used to
push elements left or right. 

float: left;
float: right;
1
Marcus
Marcus
Code: CSS
2021-02-20 06:42:41 
This is the code 

.float-wrapper::after {
  content: "";
  clear: both;
  display: block;
}
---------------------------------------------------------------
Explanation:

.float-wrapper -> is some parent element that wraps the floating items

example:
<div class='float-wrapper'>
     <div class='floating-item'> </div>
     <div class='floating-item'> </div> 
     ....
 </div>

::after  adds  an element after the .float-wrapper, that 
has no content and clears floats from the both sides, making sure, 
other sections are not affected by floats
1
Jack Twain
Jack Twain
Code: CSS
2021-05-02 03:26:28 
<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

</body>
</html>
0
prit kalra
prit kalra
Code: CSS
2021-04-29 03:27:55 

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}

.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}

.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 
100%;}
0

Tags

Related

New to Communities?

Join the community