Aug
10
CSS – float Property ”; Previous Next The CSS float property controls the positioning and formatting of content on the page. It positions an element on the right or left side of the container, letting text and other inline elements to wrap around it. The float property uses the block layout, hence it adjusts the computed value of the display property in certain cases: Specified value Computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid This chapter discusses how to use float property. Possible Values Following are all possible values that can be used for property float: none: The element does not float. This is the default value. left: The element floats to the left of its container.. right: The element floats to the right of its container. inline-start: The element floats to the start side of its containing block. (For ltr scripts its left side, and the right side for rtl scripts). inline-end: The element floats to the end side of its containing block. (For ltr scripts its right side, and the left side for rtl scripts). Values inline-start and inline-end are supported only by Firefox and Safari browsers. Applies to All elements, but has no effect if the value of display is none. Syntax float = left | right | inline-start | inline-end | none We can”t float elements to the center, top, or bottom of a container — only left or right float can be done. Following example demonstrates usage of float property with its values: <html> <head> <style> div { margin: 5px; width: 50px; height: 150px; } .left { float: left; background: yellow; } .right { float: right; background: cyan; } .inherit{ float: inherit; background: pink; } </style> </head> <body> <div class=”left”>1</div> <div class=”right”>2 <div class=”inherit”>3</div> </div> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don”t look even slightly believable. </p> </body> </html> CSS Float – Equal Width Columns We can create a two-columns layout with equal widths where two grid boxes are floated on the right side of a container using the float: right property. Here is an example − <html> <head> <style> .grid-box { float: right; width: 50%; padding: 30px; box-sizing: border-box; text-align: center; } .grid-container::after { content: “”; clear: both; display: table; } </style> </head> <body> <h4>The first red color grid box is placed on the right side.</h3> <div class=”grid-container”> <div class=”grid-box” style=”background-color:#f0610e;”> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don”t look even slightly believable.</p> </div> <div class=”grid-box” style=”background-color:#86f00e;”> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don”t look even slightly believable.</p> </div> </div> </body> </html> CSS Float – Equal Height Columns Create a simple two-columns layout with equal height where two grid boxes are floated on the left side of a container using the float: left property. Here is an example − <html> <head> <style> .grid-box { float: left; width: 50%; height: 200px; padding: 30px; box-sizing: border-box; text-align: center; } .grid-container::after { content: “”; clear: both; display: table; } </style> </head> <body> <h4>The first red color grid box is placed on the left side.</h3> <div class=”grid-container”> <div class=”grid-box” style=”background-color:#f0610e;”> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don”t look even slightly believable.</p> </div> <div class=”grid-box” style=”background-color:#86f00e;”> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don”t look even slightly believable.</p> </div> </div> </body> </html> CSS Float – Images Next To Each Other A simple four-column images layout can be created using floating elements. The float: right property positions an image to the right within the container. Here is an example − <html> <head> <style> .grid-box { float: right; width: 25%; padding: 3px; box-sizing: border-box; text-align: center; } .grid-container::after { content: “”; clear: both; display: table; } </style> </head> <body> <h4>The first image is placed on the right side, while the rest of the images are also right aligned within the container.</h4> <div class=”grid-container”> <div class=”grid-box”> <img class=”tutimg” src=”images/orange-flower.jpg” width=”100%” height=”50%” /> <p>Orange color flower</p> </div> <div class=”grid-box”> <img class=”tutimg” src=”images/see.jpg” width=”100%” height=”50%” /> <p>see</p> </div> <div class=”grid-box”> <img class=”tutimg” src=”images/tree.jpg” width=”100%” height=”50%” /> <p>Tree</p> </div> <div class=”grid-box”> <img class=”tutimg” src=”images/red-flower.jpg” width=”100%” height=”50%” /> <p>Red color flower</p> </div> </div> </body> </html> CSS Float – Flexible Boxes To create a two-column layout within a flexible container, you can use the display: flex property to make the container a flex container, and the flex-nowrap property ensures that the flex items remain in a single row even if the viewport width is reduced. Here is an example − <html> <head> <style> .grid-container { display: flex; flex-wrap: nowrap; background-color: #f0610e; } .grid-box { width: 50%; padding: 30px; box-sizing: border-box; text-align: center; background-color: #86f00e; margin: 15px; } .grid-container::after { content: “”; clear: both; display: table; } </style> </head> <body> <h4>Resize the browser window to see the