How can I fix divs to fit perfectly side by side 50% and image be a normal size-CodePudding

I am trying to fit the two divs side by side i want to text to only go to 50% page width and image to be 50% page width. i also do not want the image to be so large. just a normal size and will form to page size

Thank You!

html

#hero .container {
  display: flex;
  flex-direction: column;
}

#hero .col-left {
  width: 50%;
}

#hero .col-right {
  width: 50%;
}

<section id="hero">
  <div >
    <div >
      <h1>test</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div >
      <img src="image.jpg" alt="">
    </div>
  </div>
</section>

CodePudding user response：

Use flex with flex: 50% on the flex-children.

#hero {
  width: 100%;
}

.container { 
  width: 100%;
  display: flex;
  align-items: baseline;
}

.column {
  flex: 50%;
}

.column-left {
  display:flex;
  flex-direction: column;
}

#hero .col-left{
  width: 100%;
}
#hero .col-right{
  width: 100%;
}

<section id="hero">
        <div >
          <div >
            <h1>test</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </div>
          <div >fooooooooo
            <img src="image.jpg" alt="">
          </div>
        </div>
      </section>

CodePudding user response：

Flex defaults to a flex-row placing items in a row, so to put something side by side, you want to have them in a flex-row instead of flex-column. To size the image appropriately you have to set a width/height. To have the image scale, set the image width and height to take up whatever percentage of the available space. In this instance I just let the image take 100% of the space.

#hero .container{
  display:flex;
}

#hero .col-left{
  width: 50%;
  background-color: lightblue;
}
#hero .col-right{
  width: 50%;
}

#hero .col-right #eclipse {
  width: 100%;
  height: 100%;
}

<section id="hero">
  <div >
    <div >
      <h1>test</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
    <div >
      <img
      id="eclipse"
src="https://upload.wikimedia.org/wikipedia/commons/2/22/Solar_Eclipse_May_20,2012.jpg" alt="">
    </div>
  </div>
</section>