Как разместить элементы рядом друг с другом с помощью CSS

Question

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

CSS

body {
    margin: 2%;
}

header {
    background-color: #606060;
    text-align: center;
    padding-bottom: 15px;
}

h1 {
    text-align: center;
    color: #FFFFFF;
}

aside {
    background-color: #ffcc80;
}

aside img {
    width: 150px;
    margin: 20px;
    display: block;
}

.left {
    float: left;
}

.right {
    background-color: #E0E0E0;
    float: right;
}

a {
    color: #000000;
}

.right a {
    color: #0000FF;
}

nav {

}

nav a {
    display: inline-block;
    text-decoration: none;
    width: 22%;
    background-color: rgba(255, 255, 255, .5);
    padding: 10px;
}

.active {
    background-color: #FFFFFF;
}

HTML

<aside class = "left">
            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/></a>

            <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>

            <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
        </aside>
<section class = "right">
                <h2>Watch your Head </h2>
            <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore in many Midwestern college towns.  Students (and people who wish they were still students) spend the few briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
            <p>What I find much more entertaining is the large number of people who continue to play when the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees boomeranging in the wind is topped only by the knowledge that even when you can't seem, those same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
            </p>
            <p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly, the <abbr title = "International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
    </section>

Answer 1

Зачем использовать float left и float right. Вы можете использовать поплавок слева для обоих. они будут выровнены рядом друг с другом, если места достаточно.

Я думаю, что flexbox будет лучшим решением для вас с этим проектом (содержание раздела и sidemenu). Это избавит вас от многих проблем с ростом и отзывчивостью.

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Answer 2

Попробуйте display: inline-block, которое должно работать.