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

Having trouble adjusting the height of <a> elements in the navbar

Using jQuery, you can easily insert a <span> tag around selected text and then save this modification permanently in a local HTML file

The input values are displayed in a continuous line without any breaks between them

Clicking on an iframe activates the loading of the displayed page

Does every controller page need to verify the Login Function?

Navigating with hashtags in Angular2 and anchors does not change the page position

Converting SVG circle animation into textual form - a step-by-step guide!

The concept of CSS inheritance within div elements

OceanWP Theme with a Fixed Navigation Bar

What is the best way to transfer data from a div tag to an li tag using JavaScript?

Symfony: The Database Query Button with a Pop-up Feature

Connect an existing function to JQuery animation

Unable to display background image and color on Internet Explorer

Steps for implementing a conditional statement to handle an empty string in HTML

Employing bootstrap to include oversized images within a compact, fixed div

Need to specify a parameter type for the input tag in HTML

Effective ways to enable users to upload files in a React Native app

JQuery .click Event doesn't center elements even with transform-origin adjustment

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

Tips for Importing HTML Table Data Line by Line into SQL Table