CODEWITHSUNDEEP
htmlcssflexbox
Sam
Sam

Reputation: 1461

Maintain equal width on flexbox columns when adding a margin

I have the following two-column layout using flexbox:

body {
  margin: 0;
}

.grid {
  display: flex;
}

.column {
  /* Equal width columns */
  flex: 1;
  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img {
  display: block;
  /* Site wide to make images responsive */
  max-width: 100%;
  height: auto;
  /* Cover column */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

h2 {
  margin: 0 0 24px;
}

p {
  margin: 0 0 24px;
}

a,
a:hover,
a:visited,
a:focus {
  color: #000;
}
<div class="grid">
  <div class="column">
    <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
  </div>
    <div class="column">
    <h2>Here's a Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
    <a href="#">Click Me</a>
  </div>
</div>

As you can see, the columns are equal in width and height at any viewport width.

I'd like to add a margin to the last column which contains text. Here's what I've tried:

body {
  margin: 0;
}

.grid {
  display: flex;
}

.column {
  /* Equal width columns */
  flex: 1;
  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  margin: 96px;
}

img {
  display: block;
  /* Site wide to make images responsive */
  max-width: 100%;
  height: auto;
  /* Cover column */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

h2 {
  margin: 0 0 24px;
}

p {
  margin: 0 0 24px;
}

a,
a:hover,
a:visited,
a:focus {
  color: #000;
}
<div class="grid">
  <div class="column">
    <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
  </div>
    <div class="column content">
      <h2>Here's a Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
      <a href="#">Click Me</a>
  </div>
</div>

In this example, I've added a margin to the .content column to give the text some breathing room. I assumed flexbox would account for the margin, but it doesn't.

Next, I tried the following:

body {
  margin: 0;
}

html {
	box-sizing: border-box;
}

.grid {
  display: flex;
}

.column {
  /* Equal width columns */
  flex: 1;
  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  margin: 96px;
}

img {
  display: block;
  /* Site wide to make images responsive */
  max-width: 100%;
  height: auto;
  /* Cover column */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

h2 {
  margin: 0 0 24px;
}

p {
  margin: 0 0 24px;
}

a,
a:hover,
a:visited,
a:focus {
  color: #000;
}
<div class="grid">
  <div class="column">
    <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
  </div>
    <div class="column">
      <div class="content">
        <h2>Here's a Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
        <a href="#">Click Me</a>
      </div>
  </div>
</div>

In this example, I've added a <div class="content"> tag with a margin within the text column. The columns are now equal in width at any viewport and there's breathing room for the text. This is what I am trying to achieve.

My question: Unfortunately, I'm not able to access the backend for this project, so I'm not able to add a <div class="content"> tag to the text column. Is there a way to add a margin to the text column without adding a <div class="content"> tag? I guess I can add a margin to my <h2>, <p> and <a> elements, but I'm hoping there is a more efficient way.

Upvotes: 3

Views: 931

Answers (1)

Liveindream
Liveindream

Reputation: 159

Maybe flex-basis can help:

body {
  margin: 0;
}

html {
	box-sizing: border-box;
}

.grid {
  display: flex;
}

.column {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.one {
  flex-basis: 50%
}

.two {
  flex: 1;
  margin: 0 10vw;
}

img {
  display: block;
  /* Site wide to make images responsive */
  max-width: 100%;
  height: auto;
  /* Cover column */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

h2 {
  margin: 0 0 24px;
}

p {
  margin: 0 0 24px;
}

a,
a:hover,
a:visited,
a:focus {
  color: #000;
}
<div class="grid">
  <div class="column one">
    <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
  </div>
    <div class="column two">

        <h2>Here's a Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
        <a href="#">Click Me</a>

  </div>
</div>

Upvotes: 1

Related Questions