0

I have created two columns that float next to one another. The left columns displays text and the right column will display an image. I've been having trouble finding the right code to place my image inside of the right column.

I have been placing a div around the image within the column div itself and it seems like I'm going around in circles. I would also like the image to maintain its ratio too.

Can anyone explain where I am going wrong with the CSS please?

<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> 

<head>
<style>
 * {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color:#ffffff;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    
}

html {
    width: 100vw;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


h1 {
    font-family: prestige-elite-std, monospace;
    font-weight: bold;
    font-size: 35px;
    padding: 15px 0 50px 15px;
}



.p1 {
  font-family: prestige-elite-std, monospace;
  font-weight: bold;
  font-size: 20px;
  font-style: italic;
  padding: 0 0 18px 0px;
}


.p2 {
  font-family: prestige-elite-std, monospace;
  font-size: 18px;
  padding: 0 0 10px 0px;
}

#wrapper{
  background-color:#ccc2c2;
  width: 100%; 
  max-width: 1200px; 
  position: relative; 
  margin: 0 auto; 
  padding: 5px 0;
}

#content {
  padding: 5px 0 5px 0 ; 
  position: relative; 
  overflow: hidden;
  
}

.container {
  position:relative; 
  clear: both; 
  width: 100%; 
  max-width: 1200px; 
  padding: 5px 0px 5px 0px;
  overflow: hidden;
  background-color: #ffffff;
}

.column1 {
  float: left;
  width: 30%;
  padding: 10px;
  height: 300px; 
  background-color:#fff;
  position: relative;
  border: 1px solid #000;
   
}

.column1 div.col1content {
  position: absolute;
  bottom: 60px;
}
    
.column2 {
  float: left;
  width: 70%;
  padding: 10px;
  height: 550px;
  background-color:#fff;
  border: 1px solid #000;
}

.img-container {
  max-width: 100%;
  max-height: 100%;
}   
    
    
    
</style>    

</head>
    
    <body>
      <div id="wrapper">
          <div id="content">
          <div class="container"> 
            <div class="row">
              <div class="column1">
                  <div class="col1content">
                <p class="p1">Text</p>
                <p class="p2">Text</p>
                <p class="p2">Text</p>
                <p class="p2">Text</p>
               </div>
              </div>

              <div class="column2">
              <div class="img-container">
              <img src="https://s3-eu-west-1.amazonaws.com/graphicalhouse-collective/SP19_poster_crop_2.png">
              </div>
              </div>
              
              </div>
              </div>
              </div>
              </div>
    </body>
</html>
cmc89
  • 11
  • 2

2 Answers2

0

i think try to set the image width 100%

MK Developer
  • 36
  • 2
0

I would delete the whole .img-conteiner selector and I would type this instead

 img{
        max-height: 480px;
    }

Nothing in your code interact with the actual image. So I think this would help but if you do change the size of right column then you need to change the size of the image too.

It's not still a perfect match because the proportions are not the same for the column and the image but now the whole image is visible.

Meppo
  • 23
  • 3