Is there a way to align one <article> next to another <article> to create a horizontal layout?

Question

Is there a way to align one <article> next to another <article> to create a horizontal layout?

Can anyone help me figure out how to display two <article>s on the same line or side-by-side, with the FirstArticle positioned to the left and the SecondArticle to the right?

.MainContent {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    line-height: 30px;
}

.Content {
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 48%;
}

.FirstArticle {
    margin-left: 10px;
    margin-top: 30px;
}

.SecondArticle {
    margin-left: 10px;
    margin-top: 30px;
}

<div class="MainContent">
    <div class="Content">
        <article class="FirstArticle">
            <header class="Header">
                <h2>First Article</h2>
            </header>
            <footer class="Footer">
                <p class="post-info">some text for the footer..
                </p>
            </footer>
            <content>
                <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</p></q>
            </content>
        </article>
        <article class="SecondArticle">
            <header class="2Header">
                <h2>Second Article</h2>
            </header>
            <footer class="Footer">
                <p class="post-info">some text for the footer..
                </p>
            </footer>
            <content>
                <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</p></q>
            </content>
        </article>
    </div>
</div>

css html

Answer 1

Answer №1

To start, you must apply the float:left property to both articles.

Next, specify a width for each article, such as width:100px.

The final CSS code would look like this:

.FirstArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}
.SecondArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}

Answer 2

To start, you must apply the float:left property to both articles.

Next, specify a width for each article, such as width:100px.

The final CSS code would look like this:

.FirstArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}
.SecondArticle {
    margin-left: 10px;
    margin-top: 30px;
    width: 100px;
    float: left;
}

Answer 3

Answer №2

One solution is to apply the float property directly to the articles (not their container) while setting a specific width limit:

The key code snippet looks like this (with additional details included below):

.Content {
  width: 96%;
}
.FirstArticle, .SecondArticle {
  float: left;
  width: 47%;
}

.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.Content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 96%;
}
.FirstArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}
.SecondArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}

<div class="MainContent">
  <div class="Content">
    <article class="FirstArticle">

      <header class="Header">
        <h2>First Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </content>

    </article>

    <article class="SecondArticle">

      <header class="2Header">
        <h2>Second Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</p></q>
      </content>
    </article>
  </div>
</div>

Answer 4

One solution is to apply the float property directly to the articles (not their container) while setting a specific width limit:

The key code snippet looks like this (with additional details included below):

.Content {
  width: 96%;
}
.FirstArticle, .SecondArticle {
  float: left;
  width: 47%;
}

.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.Content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 96%;
}
.FirstArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}
.SecondArticle {
  margin-left: 10px;
  margin-top: 30px;
  float: left;
  width: 47%;
}

<div class="MainContent">
  <div class="Content">
    <article class="FirstArticle">

      <header class="Header">
        <h2>First Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </content>

    </article>

    <article class="SecondArticle">

      <header class="2Header">
        <h2>Second Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</p></q>
      </content>
    </article>
  </div>
</div>

Answer 5

Answer №3

When utilizing the flexbox method:

To create a flex-container, incorporate display: flex; in your .content class.

.content {
  display: flex;
}

This action will designate every direct child as a flex-item, such as your article elements. Apply flex: 1; to these elements to occupy all available space within the flex-container.

.first-article {
  flex: 1;
}
.second-article {
  flex: 1;
}

or

.content article{
  flex: 1;
}

flex: <positive-number> is equivalent to
flex: <positive-number> 1 0
. This makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. When all items in the flex container follow this pattern, their sizes will be proportional to the specified flex factor.

Code Snippet:

.main-content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 48%;
  display: flex;
}
.first-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}
.second-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}

<div class="main-content">
  <div class="content">
    <article class="first-article">

      <header class="header">
        <h2>First Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>
      <section>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </section>

    </article>

    <article class="second-article">

      <header class="second-header">
        <h2>Second Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <section>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</q>
        </p>
      </section>
    </article>
  </div>
</div>

Notes:

Avoid using the <content> element as it is outdated, refer to this resource.
Exercise caution with your CSS selectors. Although CSS syntax is case-insensitive, using certain formats may cause compatibility issues in some browsers. Additionally, classes cannot begin with a number unless properly escaped.

Answer 6

When utilizing the flexbox method:

To create a flex-container, incorporate display: flex; in your .content class.

.content {
  display: flex;
}

This action will designate every direct child as a flex-item, such as your article elements. Apply flex: 1; to these elements to occupy all available space within the flex-container.

.first-article {
  flex: 1;
}
.second-article {
  flex: 1;
}

or

.content article{
  flex: 1;
}

flex: <positive-number> is equivalent to
flex: <positive-number> 1 0
. This makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. When all items in the flex container follow this pattern, their sizes will be proportional to the specified flex factor.

Code Snippet:

.main-content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  line-height: 30px;
}
.content {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 48%;
  display: flex;
}
.first-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}
.second-article {
  margin-left: 10px;
  margin-top: 30px;
  flex: 1;
}

<div class="main-content">
  <div class="content">
    <article class="first-article">

      <header class="header">
        <h2>First Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>
      <section>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </section>

    </article>

    <article class="second-article">

      <header class="second-header">
        <h2>Second Article</h2>
      </header>

      <footer class="footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <section>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</q>
        </p>
      </section>
    </article>
  </div>
</div>

Notes:

Avoid using the <content> element as it is outdated, refer to this resource.
Exercise caution with your CSS selectors. Although CSS syntax is case-insensitive, using certain formats may cause compatibility issues in some browsers. Additionally, classes cannot begin with a number unless properly escaped.

Answer 7

Answer №4

To achieve the desired layout, utilize display flex.

Feel free to refer to this code snippet for assistance:

.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
}
.Content {
  width: 100%;
  display: flex;
  flex-direction: row;
}

<div class="MainContent">
  <div class="Content">
    <article class="FirstArticle">

      <header class="Header">
        <h2>First Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>
      <content>
        <p>
          <q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </content>

    </article>

    <article class="SecondArticle">

      <header class="2Header">
        <h2>Second Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</q>
        </p>
      </content>
    </article>
  </div>
</div>

Hopefully, this information proves helpful.

Answer 8

To achieve the desired layout, utilize display flex.

Feel free to refer to this code snippet for assistance:

.MainContent {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
}
.Content {
  width: 100%;
  display: flex;
  flex-direction: row;
}

<div class="MainContent">
  <div class="Content">
    <article class="FirstArticle">

      <header class="Header">
        <h2>First Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>
      <content>
        <p>
          <q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!)
                    looking on We
As only a sort of They!</q>
        </p>
      </content>

    </article>

    <article class="SecondArticle">

      <header class="2Header">
        <h2>Second Article</h2>
      </header>

      <footer class="Footer">
        <p class="post-info">some text for the footer..
        </p>
      </footer>

      <content>
        <p><q>All good people agree,
And all good people say,
All nice people, like Us, are We
And every one else is They:
But if you cross over the sea,
Instead of over the way,
You may end by (think of it!) looking 
                    on We
As only a sort of They!</q>
        </p>
      </content>
    </article>
  </div>
</div>

Hopefully, this information proves helpful.

Is there a way to align one <article> next to another <article> to create a horizontal layout?

Answer №1

Answer №2

Answer №3

Code Snippet:

Notes:

Answer №4

Similar questions

Navigate through the components of an array within HTML

tips for creating a mobile-friendly responsive button

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

Guide for Sending a Textnode from One Page to a Different Page within a Specific Id Element through PHP

Is there a way to consistently monitor the visible image's height?

What is causing the failure of generating a DIV element with JQuery?

implement an angular directive to apply a CSS element

DIV height adds a layer of design to a website, making it visually

Collapsed Grid System

The link in the HTML code has been prevented from opening in a new

Hover over the horizontal dropdown menu

Excessive Blank Space Issue on Mobile Devices with MDBootstrap

Steps to resolve transition zoom issues with images

What is the best way to make a span's background color stretch to 100% width?

Bootstrap 5 and Vue 3 team up to create a stunning masonry layout

Using float instead of CSS inline-block is more effective for styling a PHP element

Trouble arises when attempting to convert HTML into a PDF format

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

Convert all SASS code into CSS within a Nuxt project

Using JQUERY, CodeMirror adds elements to the HTML editor