CODEWITHSUNDEEP
htmlcss
Midori_hige
Midori_hige

Reputation: 311

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.

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

Upvotes: 2

Views: 669

Answers (2)

Johannes
Johannes

Reputation: 67814

Another answer...

insert an additional div, add box-sizing: border-box for everything, make the separator DIV any width you like and use width: calc(50% - 10px) for the two sections, where those 10pxare half of the width of the separator. It's height must be fixed, since it has not content, 1px would be enough. I gave it a background color only to make it visible - erase that background-color if you use that code:

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

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122155

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>

Upvotes: 2

Related Questions