2-Column CSS Responsive Layout with a Responsive Image

2-column CSS responsive layout with a responsive image

If you float the parent div of the image it shouldn't effect the responsive width of the image.

HTML

<div class="group">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusamus cum laboriosam magni recusandae earum unde fuga deserunt laudantium facere ducimus rerum tempora pariatur consectetur iste nulla a aut ea sit nam autem doloremque iusto exercitationem voluptatem facilis eos quasi. Mollitia sequi assumenda corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
    </div>
    <div class="right">
        <img src="http://lorempixel.com/640/480/" alt="Sample Image" />
    </div>
</div>

CSS

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

Demo

Make two column responsive images of same size

To gain more control over your images it's best to switch to background images. You can then use background-size: cover to fill out the div.

HTML

<div class="col-lg-6">
  <div class="image-holder" style="background-image: url('assets/img/101.jpg');">
     
  </div>
</div>
<div class="col-lg-6">
  <div class="image-holder" style="background-image: url('assets/img/101.jpg');">
     
  </div>
</div>

CSS

.image-holder {
  background-size: cover;
  background-position: center center;
  height: 400px;
  width: 100%;
}

If your images are just static assets it's better to include the image reference in css.

CSS responsive 2 column layout item ordering issue

Sounds like this could be solved perfectly with css grids.
This allows you to mix and position it ay way you want. Using flexbox would also be an option. Or you could change your HTML to have columns devided into rows instead of the other way around. If you place the 2 columns underneath each other, you'll have the same result.

https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "one three"
    "two four";
}

.container div:nth-child(1) { grid-area: one; }
.container div:nth-child(2) { grid-area: two; }
.container div:nth-child(3) { grid-area: three; }
.container div:nth-child(4) { grid-area: four; }

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "one"
      "two"
      "three"
      "four";
  }
}

<div class="container">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
</div>

How to make responsive two columns in a row? In first text, in second image in bootstrap 4

Set image width to 100% so that it won't be overflowed to the next block.

Check out this.

Since bootstrap uses display:flex all the blocks inside the div row will have same height.

.col-md-6 img{width:100%;}

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class='container'>    <div class='row'>    <div class='col-md-6'>    <div class='text'>    <h2>Test test</h2>    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>    </div>    </div>    <div class='col-md-6'>    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>    </div>    </div>    <div class='row'>    <div class='col-md-6'>    <img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>    </div>    <div class='col-md-6'>    <div class='text'>    <h2>Test test</h2>    <p>Lorem pep lorem pep lorem pep lorem pep lorem </p>    </div>    </div>    </div>    </div> 

Responsive two column layout reordering the blocks

@Paulie_D's comment and @G-Cyr's answer inspired me this solution:

The six divs that must be aligned are grouped in two intermediate <div>, representing the two columns in the desktop layout. They are grand-children of the container, instead of children.

On mobile, we ignore the column divs with display: contents; and reorder the grand-children using flexbox's order: n;. On desktop we display the two columns using display: inline-block;, and leave the grand-children in source-order.

for(let e of document.getElementsByClassName('item')) {  e.style.minHeight = Math.floor(25 + Math.random() * 72) + 'px';}

.container {  display: flex;  flex-direction: column;}.item {  margin-bottom: 0.5em;  text-align: center;  background:#ddd;  padding: 1em;}.left, .right{  display: contents;}.item1, .item2{  order: 1;}.item3, .item4{  order: 2;}.item5, .item6{  order: 3;}
@media (min-width: 40em){  .left, .right{    display: inline-block;    vertical-align: top;  }  .container{    display: block;  }  .left{    width: calc(67% - 0.5em);    margin-right: 0.5em;  }  .right{    width: 33%;  }}

<div class="container">  <div class="left">    <div class="item item1">1</div>    <div class="item item3">3</div>    <div class="item item5">5</div>  </div><div class="right">    <div class="item item2">2</div>    <div class="item item4">4</div>    <div class="item item6">6</div>  </div></div>

Responsive two column css grid

Media queries

If you want to resize your grid or stack one of each other when writing css, you should set media queries and write the expected rules in order to the grid behave well.

For example, you have this HTML structure

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
    <div class="grid-item">1</div>
</div>

.grid{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  column-gap: 20px;
}

If you want that to (for example) stack one column on each other when the screen view is less than 992px (md width in bootstrap) you could do a media querie

.grid{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  column-gap: 20px;
}

@media screen and (max-width: 992px){
   .grid{
      grid-template-columns: repeat(2, 1fr);
   }
}

You can set rules when the viewport is smaller and keeping your web looking great. Hope this article helps: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Responsive full height two column website, image inside one column

Here's a solution without using flex. It's completely responsive and can be scaled both horizontally and vertically.

body {  margin: 0;  padding: 0;}
#container {  width: 100%;  height: 100vh;  overflow: hidden;}
#column1 {  position: relative;  width: calc(50% - 4px);  height: calc(100% - 4px);  display: inline-block;  border: 2px solid black;}
#column1 span {  display: block;  position: relative;  top: 50%;  transform: translateY(-50%);  padding: 10px;}
#column2 {  position: relative;  top: -50%;  left: 50%;  width: calc(50% - 2px);  height: calc(50% - 4px);  display: inline-block;  border: 2px solid black;  border-left: none;}

<div id="container">  <div id="column1">    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>  </div>  <footer id="column2"></footer></div>

2 Column responsive layout with Bootstrap 4

To make a div use up the space left, you just need to add the class col to that div. It will automatically assign all the space left to it. Under mobile view (when the left div occupies the whole row), the div will automatically become 100% wide.

div {border: 1px solid #000000;}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">  <div class="row">    <div class="col-4">      ex: col-4    </div>    <div class="col">      this will take up all the space left    </div>  </div></div>

---

Related Topics