The float property in CSS is a fundamental feature
used for layout designs. Initially designed to allow text to wrap around
images, it has evolved to be used for a variety of layout techniques.
The float property can have following values.
.element { float: left; /* Floats the element to the left */ float: right; /* Floats the element to the right */ float: none; /* Default value, the element does not float */ float: inherit; /* Inherits the float value from its parent */ }
When an element is floated, it is taken out of the normal document flow and pushed to the left or right, allowing text and inline elements to wrap around it. This behavior is like how text wraps around images in a newspaper.
1. Float Left: The element is pushed to the left side of its containing block, and other content (like text) wraps around its right side.
2. Float Right: The element is pushed to the right side, and other content wraps around its left side.
3. Float None: The element remains in the normal flow, and no floating is applied.
float-demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Float Property Demo</title> <style> .left-align{ float: left; width: 40vw; height: 30vh; } .right-align{ float: right; width: 40vw; height: 30vh; } img{ margin-right: 10px; } </style> </head> <body> <h1>Thiruvannamalai Temple</h1> <div class="box"> <img src="ThiruvannamalaiTemple.jpg" class = 'right-align' /> <h1>Overview</h1> <p>Thiruvannamalai Temple, also known as Arunachaleswarar Temple, is one of the most revered and ancient temples in South India. Located in the town of Thiruvannamalai in the Tamil Nadu state, this temple is dedicated to Lord Shiva, who is worshiped here as Arunachaleswarar, the deity associated with fire. The temple is renowned for its magnificent architecture, spiritual significance, and vibrant festivals that attract millions of devotees and tourists from around the world.</p> <h1>Historical Significance</h1> <p>The history of the Thiruvannamalai Temple dates back to several centuries. While the temple's origins are steeped in antiquity, its current structure is believed to have been constructed between the 9th and 10th centuries by the Chola dynasty, with significant contributions from the Vijayanagara kings in the 14th and 15th centuries. Over time, various rulers and dynasties have contributed to its expansion and embellishment, making it one of the largest and most impressive temple complexes in India.</p> <h1>Architectural Marvel</h1> <p>Spanning an area of about 25 acres, Thiruvannamalai Temple is a stunning example of Dravidian architecture, characterized by its towering gopurams (gateway towers), massive courtyards, intricately carved pillars, and ornate sculptures. The temple complex has four gopurams, with the eastern tower, known as the Rajagopuram, being the tallest at about 66 meters (217 feet). This imposing structure is adorned with thousands of intricate carvings depicting various deities, scenes from Hindu mythology, and floral patterns.</p> <h1>Virupaksha Cave: A Sacred Retreat in Thiruvannamalai</h1> <img src="virupaksha-caves.jpg" class = 'left-align' /> <p>Virupaksha Cave is a renowned spiritual site located on the slopes of Arunachala Hill in Thiruvannamalai, Tamil Nadu. Named after the 13th-century sage Virupaksha Deva, the cave is a significant place of meditation and spiritual retreat. It is closely associated with the life and teachings of Sri Ramana Maharshi, one of India's most revered modern saints, who spent several years in deep meditation here. The cave's serene atmosphere, historical significance, and spiritual vibrations make it a popular destination for pilgrims and seekers from all over the world.</p> <p>The Virupaksha Cave is named after Virupaksha Deva, a saint who lived here in the 13th century. His spiritual presence and the cave's natural setting have made it a sacred site for meditation and contemplation. The cave gained further prominence in the early 20th century when Sri Ramana Maharshi, a young sage who later became widely respected for his teachings on self-inquiry and the nature of consciousness, resided here.</p> <p>Ramana Maharshi first came to Thiruvannamalai in 1896, drawn by the spiritual magnetism of Arunachala Hill. He spent about 16 years in and around Virupaksha Cave, from 1899 to 1916, before moving to another cave called Skandashram. During his time at Virupaksha Cave, Ramana Maharshi attracted many followers and devotees who sought his guidance and wisdom. His time in the cave solidified its reputation as a powerful spiritual retreat.</p> </div> </body> </html>
Above snippet generate below screen.
We can achieve two column layout using float
By floating one element to the left and another to the right, a two-column layout could be achieved.
two-column-layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Two Column Layout</title> <style> body { font-family: Arial, sans-serif; } .container { width: 100%; max-width: 80%; /* Optional: Limit container width */ margin: 0 auto; /* Center container */ overflow: hidden; /* Clear floats for the container itself */ } .column-left { width: 50%; float: left; background-color: #f0f0f0; } .column-right { width: 50%; float: right; background-color: #e0e0e0; padding: 10px; box-sizing: border-box; /* Include padding in width calculation */ } /* Optional: Add some basic styles for paragraphs */ p { margin: 0; padding-right: 10px; } </style> </head> <body> <div class="container"> <div class="column-left"> <p>This is the left column. It will take up 50% of the width and float to the left.This is the left column. It will take up 50% of the width and float to the left.This is the left column. It will take up 50% of the width and float to the left.This is the left column. It will take up 50% of the width and float to the left.</p> </div> <div class="column-right"> <p>This is the right column. It will take up 50% of the width and float to the right.This is the right column. It will take up 50% of the width and float to the right.This is the right column. It will take up 50% of the width and float to the right.</p> </div> <div style="clear: both;"></div> <!-- Clear the floats --> </div> </body> </html>
No comments:
Post a Comment