Float and Clear in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alignment</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+AT:ital,wght@0,100..400;1,100..400&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="CSS/styleSeven.css">
</head>

<body>
    <div class="container">
        <h1>Welcome to my store</h1>
        <div id="fruit" class="item">
            <h3>Fruit</h3>
            <p id="fruitpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae
                debitis corrupti, a beatae sit, tempore rem quod enim non nesciunt suscipit. Debitis saepe error
                necessitatibus ex similique veritatis consectetur dolore quos impedit laboriosam. Lorem ipsum dolor sit
                amet consectetur, adipisicing elit. Maiores facilis alias optio eveniet deleniti vel consequatur ipsa
                magnam, fugiat placeat natus accusantium praesentium iste quas, hic dignissimos nostrum necessitatibus
                provident dicta dolorum animi impedit?</p>
        </div>
        <div id="computer" class="item">
            <h3>Computer</h3>
            <p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae
                debitis corrupti, a beatae sit, tempore rem quod enim non nesciunt suscipit. Debitis saepe error
                necessitatibus ex similique veritatis consectetur dolore quos impedit laboriosam. Lorem ipsum dolor sit
                amet consectetur, adipisicing elit. Maiores facilis alias optio eveniet deleniti vel consequatur ipsa
                magnam, fugiat placeat natus accusantium praesentium iste quas, hic dignissimos nostrum necessitatibus
                provident dicta dolorum animi impedit?</p>
        </div>
        <div id="stationary" class="item">
            <h3>Stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae
                debitis corrupti, a beatae sit, tempore rem quod enim non nesciunt suscipit. Debitis saepe error
                necessitatibus ex similique veritatis consectetur dolore quos impedit laboriosam.</p>
        </div>
        <div id="glass" class="item">
            <h3>glass</h3>
            <p id="glasspara" class="para">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia quibusdam
                odio sit dicta quia vero a illum id dignissimos quaerat molestiae maiores dolorum rem itaque ullam eum
                sint aperiam, blanditiis unde natus necessitatibus facilis.</p>
        </div>
    </div>
</body>

</html>




CSS File
* {
    box-sizing: border-box;
}

body {
    font-family: "Ubuntu", "sans-serif";
}

.container {
    width: 900px;
    border: 3px solid purple;
    background-color: rgb(250, 226, 205);
    margin: 33px auto;
}

.item {
    border: 3px solid grey;
    margin: 12px 3px;
    padding: 12px 3px;
    background-color: rgb(248, 238, 238);
}

#fruit {
    float: right;
    width: 48%;
}

#computer {
    float: left;
    width: 48%;
}

#stationary {
    /*float: left;*/
    clear: both;
    width: 100%;
}

p,
h3 {
    text-align: justify;
}

h1 {
    margin: 23px auto;
    width: 455px;
}




Comments

Post a Comment