1

Let's assume I have a two column page: an article + image. And using flex I want it to be responsive in all screens, i.e. I want it always to keep its proportions.

See template

How do I do it?

Here is the code:

HTML

<section class="example">
    <h1>Lorem ipsum</h1>
    <section class="example-sides">
        <article class="example-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non rhoncus quam, ut varius risus.
            Donec eu ullamcorper sem, eget sodales lacus. Sed iaculis eros lectus, fringilla sollicitudin nibh viverra
            volutpat. Integer dolor est, maximus non nibh eget, cursus commodo lectus. In finibus sagittis lectus. Donec
            nec mi dui. Praesent sit amet ullamcorper neque. Nulla id libero vitae dui fringilla volutpat. Suspendisse
            lacinia rutrum sem eget fringilla.

            Fusce porta orci dui, ac egestas nibh cursus vitae. Sed vel odio venenatis, elementum enim in, malesuada
            eros. In dapibus ex vitae leo vestibulum, non lacinia massa varius. Nullam faucibus eros ut maximus dapibus.
            Praesent vitae ante vulputate, sagittis lectus eu, egestas massa. Curabitur eget pulvinar nunc. Donec
            faucibus libero sed nisi efficitur, sit amet efficitur diam aliquet. Fusce a ultricies neque. Maecenas
            fringilla iaculis metus, efficitur faucibus lorem. Etiam nisi orci, hendrerit eu felis ac, interdum laoreet
            nisi. Etiam sit amet fermentum odio. Nulla et vehicula purus. Sed lacinia pharetra augue.
        </article>

        <figure class="example-img">
            <img src="https://pbs.twimg.com/profile_images/583353499808829441/PYs1EDZv.png" class="image">
            <figcaption>
                Lorem Ipsum
            </figcaption>
        </figure>
    </section>

CSS

.image {
  width: 300px;
  height: 200px;
}
.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}
.example-sides {
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  line-height: 20px;
  padding: 45px 0 55px 0;
}
.example-text {
  box-sizing: border-box;
  float: left;
  padding-left: 0 !important;
}
.example-img {
  box-sizing: border-box;
  margin-left: 20px;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Martin
  • 23
  • 3

4 Answers4

0

Please try this one

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
  width: 100%;
}
.span_1_of_2 {
  width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col { 
    margin: 1% 0 1% 0%;
  }
}

@media only screen and (max-width: 480px) {
  .span_2_of_2, .span_1_of_2 { width: 100%; }
}
<div class="section group">
  <div class="col span_1_of_2">
    This is column 1
  </div>
  <div class="col span_1_of_2">
    This is column 2
  </div>
</div>
Manish Patel
  • 3,648
  • 1
  • 14
  • 22
Amit Prajapati
  • 13,525
  • 8
  • 62
  • 84
0

you need a nested flex div to approach this.

div#mainContent{
display:flex;
flex-direction:row;
flex-wrap:wrap;
height:500px;
position:relative;}

#mainContent .forImage{
  position:relative;
  background:red;
  width:30%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.forImage .theImage{
  width:90%;
  margin-top:50px;
}
.theImage img{
width:100%;}

#mainContent .forText{
  background:yellow;
  width:70%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
}
.forText .theText{
 width:90%;
  margin-top:50px;
}
<div id="mainContent">
<section class="forImage">
  <div class="theImage">
    <image src="http://imagecolony.com/wp-content/uploads/2016/09/Wallpaper-Wide-803.jpg">
  </div>
</section>
<section class="forText">
  <div class="theText">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</section>
</div>
Obink
  • 229
  • 2
  • 13
0

Here's a starting point:

body {
  max-width: 95%;
  background: #111;
}
.columnleft {
  float: left;
  max-width: 50%;
}
.columnright {
  float: right;
  max-width: 50%;
}
.article {
  border: 1px solid #999;
  display: inline-block;
  margin: 4%;
}
.title {
  color: #aff;
  font-size: 22px;
  text-align: center;
  margin: 20px 0 5px 0;
}
.content {
  color: #888;
  font-size: 18px;
  text-align: justify;
  padding: 20px;
  margin: 15px 15px 30px 15px
}
img {
  margin: 0 auto;
  max-width: 100%
}
<body>
  <div class="columnleft">
    <div id="article1" class="article">
      <div class="title">Headline 1</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore.
      </div>
    </div>
    <div id="article2" class="article">
      <div class="title">Headline 2</div>
      <div class="content">
        <img src="http://placehold.it/1200x600">
      </div>
    </div>
    <div id="article3" class="article">
      <div class="title">Headline 3</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro.Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
      </div>
    </div>
  </div>
  <div class="columnright">
    <div id="article4" class="article">
      <div class="title">Headline 4</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit.
      </div>
    </div>
    <div id="article5" class="article">
      <div class="title">Headline 5</div>
      <div class="content">Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere
        menandri mei te, praesent democritum no pro. Aliquid tractatos facilisis in eam. Odio nisl scriptorem mea ad, id alii vidisse sit. Animal voluptaria mel te. An eum harum labore. Lorem ipsum dolor sit amet, legere menandri mei te, praesent democritum
      </div>
    </div>
    <div id="article6" class="article">
      <div class="title">Headline 6</div>
      <div class="content">
        <img src="http://placehold.it/1000x400">
      </div>
    </div>
  </div>
</body>
0

Flexbox is a good choice for this layout

If you want to keep your HTML structure and the image has to be on the left side you additionally have to set flex-direction: row-reverse or give an order otherwise you could simply put the figure before the article tag.

To achieve your desired layout just change your CSS to the following

CSS

.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}

.example-sides {
  display: flex;
  line-height: 20px;
  padding: 0 20px;
}

.example-text {
  flex: 1;
  min-width: 200px;
  order: 2;
  margin-left: 20px;
}

.example-img {
  flex: 0 1 300px;
  order: 1;
  margin: 0;
}

.image {
  width: 100%;
  max-height: 200px;
}


.example {
  max-width: 800px;
  margin: 0 auto;
  font-size: 14px;
  padding: 54px 0 0 0;
  width: 100%;
  position: relative;
}
.example-sides {
  display: flex;
  line-height: 20px;
  padding: 0 20px;
}
.example-text {
  flex: 1;
  min-width: 200px;
  order: 2;
  margin-left: 20px;
}
.example-img {
  flex: 0 1 300px;
  order: 1;
  margin: 0;
}
.image {
  width: 100%;
  max-height: 200px;
}
<section class="example">
  <h1>Lorem ipsum</h1>
  <section class="example-sides">
    <article class="example-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non rhoncus quam, ut varius risus. Donec eu ullamcorper sem, eget sodales lacus. Sed iaculis eros lectus, fringilla sollicitudin nibh viverra volutpat. Integer dolor est, maximus non
      nibh eget, cursus commodo lectus. In finibus sagittis lectus. Donec nec mi dui. Praesent sit amet ullamcorper neque. Nulla id libero vitae dui fringilla volutpat. Suspendisse lacinia rutrum sem eget fringilla. Fusce porta orci dui, ac egestas nibh
      cursus vitae. Sed vel odio venenatis, elementum enim in, malesuada eros. In dapibus ex vitae leo vestibulum, non lacinia massa varius. Nullam faucibus eros ut maximus dapibus. Praesent vitae ante vulputate, sagittis lectus eu, egestas massa. Curabitur
      eget pulvinar nunc. Donec faucibus libero sed nisi efficitur, sit amet efficitur diam aliquet. Fusce a ultricies neque. Maecenas fringilla iaculis metus, efficitur faucibus lorem. Etiam nisi orci, hendrerit eu felis ac, interdum laoreet nisi. Etiam
      sit amet fermentum odio. Nulla et vehicula purus. Sed lacinia pharetra augue.
    </article>
    <figure class="example-img">
      <img src="https://pbs.twimg.com/profile_images/583353499808829441/PYs1EDZv.png" class="image">
      <figcaption>
        Lorem Ipsum
      </figcaption>
    </figure>
  </section>
</section>
SvenL
  • 1,904
  • 8
  • 10