БЛОГ НА HUSL


Как подвинуть блок вниз

Автор вопроса: Liloika

Проблема в том, что часть main разделена на 2 части с помощью float:left и float:right с помощью css. Мне нужно поместить новый блок в самый низ этих частей (но это не footer), но проблема в том, что он либо где-то справа, либо где-то поверх других блоков. Я поставила часть с этими блоками в коде HTML ниже всех в main (это те блоки что находятся справа) и поставила в часть которую позиционировала слева (эти блоки стоят поверх картинки) Я только начинаю изучать, поэтому заранее извиняюсь, если вопрос слишком глупый. (Нужно вот эти блоки с цифрами поместить ниже всех остальных блоков)

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="icon" href="./img/car_mls3jcgni2cz.svg">
    <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=Lato&family=Open+Sans&family=PT+Sans:ital,wght@0,400;0,700;1,400&family=Roboto&display=swap" rel="stylesheet"></head>
    <body>
        
    <header class="header">
        <h1 class="logo">Premium <span class="also-logo">car</span></h1>
        <ul class="header-nav">
            <li><a href="#!">Home</a></li>
            <li><a href="#!">Recipes</a></li>
            <li><a href="#!">Article</a></li>
            <li><a href="#!">Contact</a></li>
            <li><a href="#!">Purchase</a></li>
        </ul>
        
        <img src="./img/search.svg" alt="">
    </header>
    
    <main>
        <section class="first_container">
            
            <div class="biggest_card">
                <button class="description_button">Vehicle</button>
                <div class="card_info">
                    <h3 class="description_card">Rickie Baroch - June 6, 2019</h3> 
                    <h2 class="card_name">One of Saturn’s largest rings may be newer than anyone</h2>
                </div>
            </div>
            
            <div class="smallest_card">
                <div class="yellow_cars__card">
                    <button class="description_button">Vehicle</button>
                    <div class="card_info">
                        <h3 class="description_card">Rickie Baroch - June 6, 2019</h3> 
                        <h2 class="card_name">One of Saturn’s largest rings may be newer than anyone</h2>
                    </div>
                </div>
                
                <div class="white_cars__card">
                    <button class="description_button">Vehicle</button>
                    <div class="card_info">
                        <h3 class="description_card">Rickie Baroch - June 6, 2019</h3> 
                        <h2 class="card_name">One of Saturn’s largest rings may be newer than anyone</h2>
                    </div>
                </div>
                
                <div class="black_cars__card">
                    <button class="description_button">Vehicle</button>
                    <div class="card_info">
                        <h3 class="description_card">Rickie Baroch - June 6, 2019</h3> 
                        <h2 class="card_name">One of Saturn’s largest rings may be newer than anyone</h2>
                    </div>
                </div>
                
                <div class="old_cars__card">
                    <button class="description_button">Vehicle</button>
                    <div class="card_info">
                        <h3 class="description_card">Rickie Baroch - June 6, 2019</h3> 
                        <h2 class="card_name">One of Saturn’s largest rings may be newer than anyone</h2>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="second_container">
            
            <div class="first_car">
                <div class="visit_card">
                    <button class="description_button">Vehicle</button>
                    <h2 class="headling_card">One of Saturn’s largest rings may be newer than anyone</h2>
                    <h3 class="card_data">Rickie Baroch - June 6, 2019</h3>
                    <h3 class="insides_card">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                        totam rem sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem</h3>
                    </div>
                </div>
                
                <div class="second_car">
                    <div class="visit_card">
                        <button class="description_button">Vehicle</button>
                        <h2 class="headling_card">One of Saturn’s largest rings may be newer than anyone</h2>
                        <h3 class="card_data">Rickie Baroch - June 6, 2019</h3>
                    <h3 class="insides_card">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                        totam rem sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem</h3>
                </div>
            </div>

            <div class="third_car">
                <div class="visit_card">
                    <button class="description_button">Vehicle</button>
                    <h2 class="headling_card">One of Saturn’s largest rings may be newer than anyone</h2>
                    <h3 class="card_data">Rickie Baroch - June 6, 2019</h3>
                    <h3 class="insides_card">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                        totam rem sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem</h3>
                    </div>
                </div>
                
                <div class="fourth_car">
                    <div class="visit_card">
                        <button class="description_button">Vehicle</button>
                        <h2 class="headling_card">One of Saturn’s largest rings may be newer than anyone</h2>
                        <h3 class="card_data">Rickie Baroch - June 6, 2019</h3>
                        <h3 class="insides_card">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                            totam rem sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem</h3>
                        </div>
                    </div>
                    
                    <div class="fifth_car">
                <div class="visit_card">
                    <button class="description_button">Vehicle</button>
                    <h2 class="headling_card">One of Saturn’s largest rings may be newer than anyone</h2>
                    <h3 class="card_data">Rickie Baroch - June 6, 2019</h3>
                    <h3 class="insides_card">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                        totam rem sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem</h3>
                </div>

                
                <!-- <div class="number_page">
                    <div class="block1"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                        <path opacity="0.4" d="M5 1L1 5L5 9" stroke="#171717" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg></div>
                    <div class="block2">1</div>
                    <div class="block3">2</div>
                    <div class="block4">3</div>
                    <div class="block5">...</div>
                    <div class="block6">8</div>
                    <div class="block7"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                        <path d="M1 9L5 5L1 1" stroke="#171717" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg></div>
                </div> -->
            </div>
            
            
        </section>
    

        <aside class="additional_inform">
            <div class="first_part">
                <div class="info_about__add">
                    <h2 class="name_human">Leon Hunt</h2>
                    <h4 class="sur_name">Food & cooking bloger</h4>
                    <h3 class="discription_human">Hi, I'm Leon. Cooking is the way I express my creative side to the world. 
                        Welcome to my Kitchen Corner on…</h3>
                        <button class="first_part__button">Continue Reading</button>
                </div>
            </div>

            <div class="text">Popular posts</div>

            <div class="second_part">
                <div class="info_about__part">
                    <button class="description_button__aside">Vehicle</button>
                    <div class="heading_part">One of Saturn’s largest rings may be newer than anyone</div>
                    <div class="data_part">Rickie Baroch - June 6, 2019</div>
                </div>
            </div>

            <div class="third_part">
                <div class="info_about__part">
                    <button class="description_button__aside">Vehicle</button>
                    <div class="heading_part">One of Saturn’s largest rings may be newer than anyone</div>
                    <div class="data_part">Rickie Baroch - June 6, 2019</div>
                </div>
            </div>
            
            <div class="fourth_part">
                <div class="info_about__part">
                    <button class="description_button__aside">Vehicle</button>
                    <div class="heading_part">One of Saturn’s largest rings may be newer than anyone</div>
                    <div class="data_part">Rickie Baroch - June 6, 2019</div>
                </div>
            </div>

            <div class="instagram">Instagram</div>

            <div class="collage_cars">
                <div class="cars_in__callage">
                    <img src="./img/car1.png" alt="car1" class="car1">
                    <img src="./img/car4.png" alt="car4" class="car4">
                    <img src="./img/car2.png" alt="car2" class="car2">
                    <img src="./img/car5.png" alt="car5" class="car5">
                    <img src="./img/car3.png" alt="car3" class="car3">
                    <img src="./img/car6.png" alt="car6" class="car6">
                </div>
            </div>
            <button class="view_instagram">View instagram</button>

            <div class="text_tags">Tags</div>
            <div class="tags_block">
                <p class="tag1">Business</p>
                <p class="tag2">Freelance</p>
                <p class="tag3">Money</p>
                <p class="tag4">Experience</p>
                <p class="tag5">Lifestyle</p>
                <p class="tag6">SEO</p>
                <p class="tag7">Wordpress</p>
                <p class="tag8">Marketing</p>
                <p class="tag9">UX</p>
                <p class="tag10">Modern</p>
                <p class="tag11">Success</p>
                <p class="tag12">Nature</p>
                <p class="tag13">Productivity</p>
                <p class="tag14">Sales page</p>
                <p class="tag15">Sell</p>
                <p class="tag16">Teamwork</p>
                <p class="tag17">Monetize</p>
            </div>

            <div class="email_aside">
                <div class="email_title">Email newsletter</div>
                <div class="email_definition">Sign up to receive email updates and to hear what's going on.</div>
                <div class="input_group">
                    <input  placeholder="Your name" type="text" class="input_name">
                    <input placeholder="Your email adress" type="text" class="input_email">
                </div>
                <button class="email_subscribe">Subscribe to newsletter</button>
            </div>
        </aside>

        <section class="number_page">
            <div class="block1"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                <path opacity="0.4" d="M5 1L1 5L5 9" stroke="#171717" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            </svg></div>
            <div class="block2">1</div>
            <div class="block3">2</div>
            <div class="block4">3</div>
            <div class="block5">...</div>
            <div class="block6">8</div>
            <div class="block7"><svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                <path d="M1 9L5 5L1 1" stroke="#171717" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            </svg></div>
        </section>

    </main>

    <footer>

    </footer>
</body>
</html>

вот эти блоки с номерами страниц


Источник

Ответы (1 шт):

Автор решения: Liloika

у меня получилось! я написала свойство clear: both; к этому блоку спасибо большое!

→ Ссылка

licensed under cc by-sa 3.0 with attribution.