How to create a two column layout with equal width and height in HTML and CSS

declspecl
October 17, 2023
212 views
2 votes
3 Answers

I’m trying to create a two column layout where the left side is a div full of text, and the right side is a div with an image. They should be centered in the container, and they should both have an equal width and height, where the right div’s width and height will match the left div’s. The image attached to this thread shows my desired effect. I’ve tried numerous things, with my best guess being:

.container {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.left-div {
    flex: 1;

    /* not relevant but i will still include it for accurate context */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.right-div {
    flex: 1;
}

.right-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="container">
    <div class="left-div">
        <p>Some filler text that will cause it to have a width and height that the right div needs to meet</p>
    </div>

    <div class="right-div">
        <img src="https://picsum.photos/id/522/536/354" />
    </div>
</div>

but it did not work, as the image just stretched to the maximum height while retaining its aspect ratio .
I don’t know how to create this "dependency" with CSS. If I could theoretically set flex: 1 for both the row and column direction, I think that would work, but due to I would need to format the html to get this layout, I wouldn’t be able to include both divs as children to two divs. I think it should be achievable with some flexbox or CSS grid magic, though.

Thank you so much for the help!

Answers

Chosen as BEST ANSWER

With inspiration from @Kosh's answer, I solved it with the following code in case anybody finds this thread wondering the same thing:

.container {
    display: flex;
    justify-content: center;
}

.left-div {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.right-div {
    position: relative;

    flex: 1;
}

.right-div img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

<div class="container">
    <div class="left-div">
        <p>Some filler text that will cause it to have a width and height that the right div needs to meet</p>
    </div>

    <div class="right-div">
        <img src="https://picsum.photos/id/522/536/354" />
    </div>
</div>

(Edit)

You might set position: absolute to your right div, therefore it would be removed from the flow and would not affect the size of container, and position it to the right. Then set margin-right to the left div so divs would not overlap:

.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
}

.left-div {
  flex: 1; margin-right:50%;
  /* not relevant but i will still include it for accurate context */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-div {
  flex: 1;
  position:absolute;
  top:0; right:0; bottom:0; left:50%;
}

.right-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="left-div">
    <p>Some filler text that will cause it to have a width and height that the right div needs to meet</p>
    <p>Another line of filler text that will cause it to have a width and height that the right div needs to meet</p>
  </div>

  <div class="right-div">
    <img src="https://picsum.photos/id/522/536/354" />
  </div>
</div>

remember you can use flex inside of flex. Only use absolute positioning when you really have to.

.container{
display:flex;
}

.left-div,.right-div{
   border:solid 1px blue;
   width:50%;
}
   
.right-div{
   display:flex;
   justify-content:center;
   align-items:center;
}

<div class="container">
    <div class="left-div">
        <p>Some filler text that will cause it to have a width and height that the right div needs to meet</p>
        <p>Another line of filler text that will cause it to have a width and height that the right div needs to meet</p>
    </div>

    <div class="right-div">
        <img src="https:\placeholder.com/100" />
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.