What is the best way to split a section into two articles of the same width?

Question

What is the best way to split a section into two articles of the same width?

My challenge is to create a layout with two articles inside a section, each with equal width and bordered with a slight separation in between. The ultimate goal is to have these articles within a section, next to which there will be an aside.

I'm struggling to achieve the desired result of having the articles with equal width while also incorporating borders and a separation between them.

.section-split {
  border: solid;
  margin-top: 5px;
  float: left;
  overflow: hidden;
  width: 84%;
  background-color: white;
  padding: 5px;
}
.section-article1 {
  width: 50%;
  float: left;
  margin-right: 5px;
}
.section-article2 {
  display: inline-block;
  width: 50%;
  margin-right: -330px;
}
.article-orange {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}
.article-red {
  background-color: red;
  float: left;
  width: 100%;
  border: solid;
  padding: 10px;
}
.aside-purple {
  background-color: purple;
  float: left;
  width: 200px;
}

<section class="section-split">
  <section class="section-article1">
    <article class="article-orange">Article 1</article>
  </section>
  <section class="section-article2">
    <article class="article-red">Article 2</article>
  </section>
</section>

<aside class="aside-purple">Aside</aside>

html css

Answer 1

Answer №1

To achieve the desired layout, you need to eliminate white-space, implement box-sizing, and utilize the calc() function.

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid;
  float: left;
  width: calc(100% - 200px);
  background-color: white;
  padding: 5px;
}
section.sec3 {
  width: calc(50% - 5px);
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
section.sec4 {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  float: left;
  width: 100%;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section><!--
  
  --><section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>
 <aside class="as1">Aside</aside>

Alternatively, you can simplify this process by utilizing Flexbox.

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: flex-start;
}
section.sec2 {
  border: solid;
  display: flex;
  flex: 1;
  background-color: white;
  padding: 5px;
}
.sec3,
.sec4 {
  flex: 1;
}
article.ar1 {
  background-color: orange;
  border: solid;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  flex: 0 0 200px;
}

<div class="container">
  <section class="sec2">
    <section class="sec3">
      <article class="ar1">Ar1</article>
    </section>
    <section class="sec4">
      <article class="ar2">Ar2</article>
    </section>
  </section>
  <aside class="as1">Aside</aside>
</div>

Answer 2

To achieve the desired layout, you need to eliminate white-space, implement box-sizing, and utilize the calc() function.

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid;
  float: left;
  width: calc(100% - 200px);
  background-color: white;
  padding: 5px;
}
section.sec3 {
  width: calc(50% - 5px);
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}
section.sec4 {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  float: left;
  width: 100%;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section><!--
  
  --><section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>
 <aside class="as1">Aside</aside>

Alternatively, you can simplify this process by utilizing Flexbox.

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: flex-start;
}
section.sec2 {
  border: solid;
  display: flex;
  flex: 1;
  background-color: white;
  padding: 5px;
}
.sec3,
.sec4 {
  flex: 1;
}
article.ar1 {
  background-color: orange;
  border: solid;
  padding: 10px;
}
article.ar2 {
  background-color: red;
  border: solid;
  padding: 10px;
}
aside.as1 {
  background-color: purple;
  flex: 0 0 200px;
}

<div class="container">
  <section class="sec2">
    <section class="sec3">
      <article class="ar1">Ar1</article>
    </section>
    <section class="sec4">
      <article class="ar2">Ar2</article>
    </section>
  </section>
  <aside class="as1">Aside</aside>
</div>

Answer 3

Answer №2

Here's an alternate solution...

To enhance the layout, include an additional div with the style box-sizing: border-box applied universally. You can set the width of the separator DIV to your preference and adjust the two sections using width: calc(50% - 10px), where 10px represents half of the separator's width. The height should be fixed at 1px as there is no content inside. I've included a background color for visibility purposes only:

http://codepen.io/anon/pen/zKWxrV

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section>
  <div class="vertical_separation">
  </div>
  <section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>

<aside class="as1">Aside</aside>

CSS:

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid 1px black;
  margin-top: 5px;
  float: left;
  width: 84%;
  background-color: white;
  padding: 5px;
  overflow: hidden;
}

section.sec3 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

section.sec4 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}

article.ar2 {
  background-color: red;
  width: 100%;
  border: solid;
  padding: 10px;
}

aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

.vertical_separation {
  float: left;
  width: 20px;
  height: 10px;
  background: green;
}

Answer 4

Here's an alternate solution...

To enhance the layout, include an additional div with the style box-sizing: border-box applied universally. You can set the width of the separator DIV to your preference and adjust the two sections using width: calc(50% - 10px), where 10px represents half of the separator's width. The height should be fixed at 1px as there is no content inside. I've included a background color for visibility purposes only:

http://codepen.io/anon/pen/zKWxrV

<section class="sec2">
  <section class="sec3">
    <article class="ar1">Ar1</article>
  </section>
  <div class="vertical_separation">
  </div>
  <section class="sec4">
    <article class="ar2">Ar2</article>
  </section>
</section>

<aside class="as1">Aside</aside>

CSS:

* {
  box-sizing: border-box;
}
section.sec2 {
  border: solid 1px black;
  margin-top: 5px;
  float: left;
  width: 84%;
  background-color: white;
  padding: 5px;
  overflow: hidden;
}

section.sec3 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

section.sec4 {
  float: left;
  width: calc(50% - 10px);
  display: inline-block;
}

article.ar1 {
  background-color: orange;
  border: solid;
  width: 100%;
  padding: 10px;
}

article.ar2 {
  background-color: red;
  width: 100%;
  border: solid;
  padding: 10px;
}

aside.as1 {
  background-color: purple;
  float: left;
  width: 200px;
}

.vertical_separation {
  float: left;
  width: 20px;
  height: 10px;
  background: green;
}

What is the best way to split a section into two articles of the same width?

Answer №1

Answer №2

Similar questions

Hey there, I'm having trouble with button B. It's not working, do

Stylus - elements close by: the "+" symbol

Reasons and methods for closing the img tag

Unveiling the method to fetch the emitted value from a child component and incorporate it into the parent component's return data in Vue

The concept of cascading opacity in CSS: exploring nested elements

Guide to showing a form following a button click in Angular 9

jQuery UI - Add character right before the final element

The toggle button is unresponsive and the menu fails to slide down smoothly

Tips for verifying user input prior to taking action

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Unable to interpret the JSON reply from the server

Google Maps introduces a new feature that creates a blur effect on

My attempt to use the Redux method for displaying data in my testing environment has not yielded

Strategies for determining the direction of a slide event within a Bootstrap carousel

Using the <script> attribute within the <head> tag without the async or defer attributes

Using an HTML block within an AJAX request

I'm having trouble showing the concealed list with JavaScript

ReactStrap: Rows and columns causing components to stack on top of each other

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

What is the best way to check the difference between the current date and time with another date and