Question 45614 in CSS Question posted in
Some basic documentation can be found here.

Styling side by side elements – CSS

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>
Tags:

5

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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 class="container">
  <div class="flex-item info">
    <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 class="flex-item">
    <div><img class="image" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
    </div>
  </div>

</div>
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
  5. 0

    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 class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search