html - Set the position of divs to the far ends - Stack Overflow

I believe this question has been asked before, one way or another, but I am unable to get the expected results.

In a nutshell I have a grid of two columns, where one encloses a div with an image and another a div of just text. I have used transform scale to shrink the div of the image but I want to move that div to the far left or far right in order to make room for the text.

Online example: /

How can I move the div of the image to the far left, and right, and increase the size of the text column?

Also, where is that extra space around the image div coming from?

 .wrapper
{
    border: 1px solid rgba(255,0,0,1.0);
  
    width: 90%;
    display: grid;
    grid-template-columns: auto auto;
    margin: auto auto;
}

.images
{
    border: 1px solid rgba(0,255,0,1.0);

    margin:       auto auto;
    margin-left:  10px;
    margin-right: 10px;
    transform: scale(0.5);
}

.images img
{
    display: block;
        /*top  right bottom left*/
    padding: 10px 10px  10px   10px;
    
    margin: auto auto;
    transform: rotate(5deg);
}

.article
{
    border: 1px solid rgba(0,0,255,1.0);
    margin-top:   0;
    margin-left:  10px;
    margin-right: 10px;
}

<div>

  <div class="wrapper">
    <div class="images">
      <img src=".jpg" style="height: 150px;">
    </div>
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
  </div>

  <br>

  <div class="wrapper">
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
    <div class="images">
      <img src=".jpg" style="height: 300px;">
    </div>
  </div>

</div>

I believe this question has been asked before, one way or another, but I am unable to get the expected results.

In a nutshell I have a grid of two columns, where one encloses a div with an image and another a div of just text. I have used transform scale to shrink the div of the image but I want to move that div to the far left or far right in order to make room for the text.

Online example: https://jsfiddle.net/rxh1m6kg/1/

How can I move the div of the image to the far left, and right, and increase the size of the text column?

Also, where is that extra space around the image div coming from?

 .wrapper
{
    border: 1px solid rgba(255,0,0,1.0);
  
    width: 90%;
    display: grid;
    grid-template-columns: auto auto;
    margin: auto auto;
}

.images
{
    border: 1px solid rgba(0,255,0,1.0);

    margin:       auto auto;
    margin-left:  10px;
    margin-right: 10px;
    transform: scale(0.5);
}

.images img
{
    display: block;
        /*top  right bottom left*/
    padding: 10px 10px  10px   10px;
    
    margin: auto auto;
    transform: rotate(5deg);
}

.article
{
    border: 1px solid rgba(0,0,255,1.0);
    margin-top:   0;
    margin-left:  10px;
    margin-right: 10px;
}

<div>

  <div class="wrapper">
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg" style="height: 150px;">
    </div>
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
  </div>

  <br>

  <div class="wrapper">
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg" style="height: 300px;">
    </div>
  </div>

</div>

• html
• css

Share Follow edited Jan 30 at 16:16 Constantinos Glynos asked Jan 30 at 15:56 Constantinos GlynosConstantinos Glynos 3,20622 gold badges1717 silver badges3333 bronze badges 5

• A transform is purely visual, it does not actually change the size of the image. – Paulie_D Commented Jan 30 at 16:05
• Should I use scale directly then? Although I tried that but didn't work. Not sure how to go about it. – Constantinos Glynos Commented Jan 30 at 16:07
• scale is still a transform... If you want the image to reduce in size, use height or width. – Paulie_D Commented Jan 30 at 16:08
• The problem is that each image is scaled in the html file. How can I then scale each image by 50% from what it is already assigned in the html? Using a transform was the only way I could achieve this. – Constantinos Glynos Commented Jan 30 at 16:15
• Changing the HTML would seem to be your only option. – Paulie_D Commented Jan 30 at 16:25

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can simplify the styles dramatically. See my comments in the updated stylesheet below.

Also, try to avoid pixels and use rem/em units instead.

/* margin+border+padding part of width/height */
*, *::before, *::after {
  box-sizing: border-box;
}

.wrapper {
  display: flex; /* No need for grid, just flex */
}

.images img {
  transform: rotate(5deg);
  padding: 1rem;
  max-height: 10rem; /* Limit image height */
}

.article {
  flex: 1; /* Make text span the remaining width */
  padding: 0.25rem 0.5rem; /* Push text in */
}

.wrapper { border: 1px solid red;   }
.images  { border: 1px solid green; }
.article { border: 1px solid blue;  }

<div>
  <div class="wrapper">
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg">
    </div>
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
  </div>
  <br>
  <div class="wrapper">
    <div class="article">
      A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There are around one billion cars in use worldwide.
    </div>
    <div class="images">
      <img src="https://storage.googleapis.com/pod_public/1300/121017.jpg">
    </div>
  </div>
</div>