Why do two different divs with 100% total width make one go down and not side by side?-CodePudding

Here's the relevant html

  <div >
    <img src="./Images/information-orientation.jpg" alt="student orientation">
    <div >
      <h2>Orientation date</h2>
      <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
      <a href="3" >Read more</a>
    </div>
  </div>

and css

.r-content {
    width: 65%;
}

.section2-right img {
    width: 35%;
    height: auto;
    margin: 16px 16px;
}

I'm trying to have the text show next to the picture, but it goes down. What am I missing?

Thank you for any help.

CodePudding user response：

In HTML, by default, everything goes from top to bottom. So in s2-r1, even though you have 2 children elements and they would fit side-by-side, they will go from top to bottom.

There are many ways to make them go from side to side, but the best approach heres is to add display: flex to the s2-r1 class. By the way, you wrote .section2-right img for the image selector where it should be .s2-r1 img.

.s2-r1 {
  background-color: skyblue;
  
  /* that's all you need */
  display: flex;
}

.r-content {
  width: 65%;
}

.s2-r1 .placeholder {
  width: 35%;
  height: auto;
  margin: 16px 16px;
  color: red;
  background-color: pink;
}

<div >
  <div >Placeholder for Image</div>
  <div >
    <h2>Orientation date</h2>
    <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
    <a href="3" >Read more</a>
  </div>
</div>

CodePudding user response：

That's because you are using margin.

That means 35% margin 65% = more than 100%.

CodePudding user response：

Because the DIV is a block element which means it will be one row and bush the other siblings down.