Styling side by side elements-CodePudding

I have figured out how to set two HTML elements side by side. I want to have a text paragraph on the left and an image on the right. Currently, my code is:

<!DOCTYPE html>
<html>
<style>

</style>
<body>

 <div style="width: 50%; height: 100px; float: left;" >
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
    </div>

<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
  </div>
</body>
</html>

This is results in an two column layout, but I want to know how to format.

I want to add padding to the text, but when I do so, the image is messed up completely. How can I padding padding to my text so that there is space around it? I tried to add padding:20px; to the <div> that has the text which doesn't work.

<div style="width: 50%; height: 100px; float: left; padding:20px;">
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
    </div>

CodePudding user response：

Use Grid with a media query for smaller screens:

article {
  display: grid;
}

div {
  padding: 0.5em;
}

img {
  width: 100%;
}

@media (min-width: 400px) {
  article {
    grid-template-columns: 50% 50%;
  }
}

<article>
  <div>
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
      Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
  </div>
  <img src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
</article>

CodePudding user response：

use box-sizing:border-box, after applying padding, so the padding will be calculated within the width

For more info Reference

<div style="width: 50%; height: 100px; float: left; padding:20px;box-sizing:border-box" >
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
    </div>

<div style="margin-left:50%; "><img style=" max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" >
</div>
  </div>

CodePudding user response：

The best way to do this is to wrap both <div> inside a flex-box. And adding border-box as value for box-sizing property. You can read more about box-sizing here: Box Sizing and about Flex Box here. Both are pretty useful to placing items side by side.

Here is a sample code.

<!DOCTYPE html>
<html>
<style>
    * {
        box-sizing: border-box;
    }
</style>

<body>
    <div style="display: flex; flex-direction: row; width: 100%;">
        <div style="width: 50%; height: 100px; padding:20px;">
            <h2> What We Do</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore
                magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit
                egestas
                dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum
                facilisis.
            </p>
        </div>

        <div style="width: 50%; padding: 20px;">
            <img style=" max-width: 100%; height: auto;"
                src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg" />
        </div>
    </div>
</body>

</html>

The box-sizing will prevent your image from changing position when adding padding to the div. And flex-box is much better way to position things instead of float as it offers more functionality and can also position things vertically.

Here is another great article related to Flex Box - Must Read.

CodePudding user response：

You can use this example for side by side

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
}

<div >

  <div >
    Flex Column 1
  </div>
  
  <div >
    Flex Column 2
  </div>
  
</div>

CodePudding user response：

Using flex makes it really simple to control the layout.

.container {
  display: flex;
  height: max-content;
  gap: 1rem;
}

.flex-item {
  flex: 1;
  width: 50%;
}

.info {
  height: 100px;
  padding: 20px;
}

.image {
  display: inline-block;
  height: 150px;
  width: 250px;
  padding: 20px;
}

<div >
  <div >
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem.
      Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
  </div>

  <div >
    <div><img  src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
    </div>
  </div>

</div>