Midori_hige Midori_hige - 1 month ago 8
CSS Question

How to divide a section with two articles in equal width?

I'm trying to divide a section that holds two articles inside, which must have equal width using borders and have a slight separation between them. Final objective is to have those two articles inside a section and next to it an aside.

I can't seem to make the articles have equal width and at the same time use borders and a separation between them.

HTML:

<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>


CSS

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

section.sec3
{
width:50%;
float:left;
margin-right:5px;
}

section.sec4
{
display:inline-block;
width:50%;
margin-right:-330px;
}

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;

}

Answer

You will have to remove white-space, use box-sizing and also use calc() like this.

* {
  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>

Or there is much easier way to do this using 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>