как расположить секции по прямой линии?

Question

У меня проблемы с двумя созданными мной разделами. Я хочу сделать раздел уведомлений, но мои 3 статьи не такие, какими я хочу их видеть. как сделать так, чтобы три статьи и сбоку находились в одной строке без переполнения?

проблема

Я просто хочу, чтобы они были на одной прямой линии, как эта

Пример

 h1{
        margin-top: 80px;
    }
    
    article {
        background-color: beige;
        margin-bottom: 1em;
        min-height: 300px;
    }
    
    article.text{
        color: black;
        background: white;
        min-height: 300px;
    }
    
    article, h2{
        padding-top: 1em;
    }
    
    main{
        column-count: 3;
        column-gap: 20px;
        margin-top: 1em;
    }

    <main>
        
        <h1>Welkom op Het bedrijf</h1>
        
        <section>
            
            <article>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.
                    
                </p>
            </article> 
            
            
            <aside>
                <article class="text">
                    <h2>Whats new?</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est. 
                    </p>
                </article>
            </aside>    
        
        
  
    </main>



   

Answer 1

На самом деле из вашего объяснения и изображений я понимаю, что вы хотите разделить свою страницу на две разные области:

• контейнер истории с несколькими столбцами
• область уведомлений с одним столбцом

В отличие от текущего основного контейнера с тремя столбцами, который у вас есть сейчас.

Без использования Flexbox и CSS -grid я создал фрагмент с тем, что, как я понимаю, вы хотите. Я добавил несколько дополнительных статей и фоновые цвета, чтобы показать структуру, и прокомментировал CSS, где это возможно ...

Бонус: добавил некоторое «отзывчивое» поведение с использованием как математических, так и @media запросов.

/* Generally accepted preferred rules */
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }

/* remove some default HTML spacing (when required, use padding instead) */
body,h1,h2,h3,h4,h5,h6,p { margin: 0 }

/* define page structure */
.main   { height: 100%; width: 100% } /* avoid using <main> */

/* mobile first, 1 column */
section { max-width: 67%; float: left; column-count: 1; column-gap: 1.25rem }

aside   { max-width: calc(33% - 1.25rem); float: right } /* minus column-gap */
article { break-inside: avoid } /* keeps content in the same column */

/* some responsiveness */
@media (min-width:  961px) { section { column-count: 2 } }
@media (min-width: 1281px) { section { column-count: 3 } }

/*
    responsive page padding (linear equation y = mx + b)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    grow from 32px on a 320px viewport to  72px on a 1920px viewport
    grow from  8px on a 320px viewport to 320px on a 1920px viewport
*/
.padded {
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px)
}

/* eye-candy only */
header {
    column-span: all; /* span full container */
    padding: 1.25rem; /* equal to column-gap */
    background-color: Black; Color: White;
}

h1              { line-height: 1.25rem }
h2,p            { padding-bottom: .5em }

section>article { background-color: Beige }
aside>article   { background-color: rgba(0,0,0,.1); color: Black }

article {
    padding: 1.25rem;     /* equal to column-gap */
    margin-bottom: 0.5rem /* space between articles */
}

[outlines="1"] * { outline: 1px dotted }

    <div class="main padded" outlines="0">
        <section>
            <header>
                <h1>Welkom op Het bedrijf</h1>
            </header>

            <article>
                <h2>Story 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
            </article>

            <article>
                <h2>Story 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
            </article>

            <article>
                <h2>Story 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
            </article>

            <article>
                <h2>Story 4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
            </article>

            <article>
                <h2>Story 5</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum,
                    egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.</p>
            </article>
        </section>

        <aside>
            <header>
                <h1>What's new?</h1>
            </header>

            <article>
                <h2>What's new 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
                    interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
                    volutpat est.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
                    interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
                    volutpat est.</p>
            </article>
            <article>
                <h2>What's new 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
                    interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
                    volutpat est.</p>
            </article>
            <article>
                <h2>What's new 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum
                    interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in
                    volutpat est.</p>
            </article>
        </aside>
    </div>

Answer 2

Если я правильно понял, в стороне находится область уведомлений, а основное содержимое - слева. Я бы использовал для этого CSS сетку.

CSS:

.container {
            display: grid;
            grid-template-columns: repeat(2, 2fr) 1fr;
            grid-gap: 2rem;

        }

        article {
            background-color: beige;
            margin-bottom: 1em;
            min-height: 300px;
        }

        aside.notifications {
            background-color: #171717;
            color: #f5f5f5;
        }

        aside, article {
            padding: 1rem;
        }

HTML:

<main>

        <h1>Welkom op Het bedrijf</h1>

        <section class="container">

            <article>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.

                </p>
            </article>
            <article>
                <p>
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenaseget maximus sem, in volutpat est.

                </p>
            </article>


            <aside class="notifications">
                    <h2>Whats new?</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod ex vel lobortis molestie. Pellentesque a ipsum interdum, egestas enim in, rutrum justo. Phasellus dictum luctus sem, at blandit diam tempor sed. Maecenas eget maximus sem, in volutpat est.
                    </p>
            </aside>

    </section>

    </main>