CODEWITHSUNDEEP
htmlcss
randomuser2
randomuser2

Reputation: 105

Two Columns layout in CSS - text and image changing order in each row

Can you help me and tell me what's wrong in my CSS Code? It looks like this:

body
        {
            font-family: Open Sans, sans-serif;
            padding: 5rem 1.25rem; /* 80 20 */
        }

        .container
        {
            width: 100%;
            max-width: 60rem; /* 960 */
            margin: 0 auto;
        }
            .item
            {
                width: 100%;
                overflow: hidden;
                margin-bottom: 5rem; /* 80 */
            }
            }
            .item
            {
                color: #666;
            }
                .item__info,
                .item__img
                {
                    width: 50%;
                    float: left;
                }
                .item:nth-child( even ) .item__info
                {
                    float: right;
                    padding-left: 1.25rem; /* 20 */
                }
                .item:nth-child( even ) .item__img
                {
                    padding-right: 1.25rem; /* 20 */
                }
                .item:nth-child( odd ) .item__info
                {
                    padding-right: 1.25rem; /* 20 */
                }
                .item:nth-child( odd ) .item__img
                {
                    padding-left: 1.25rem; /* 20 */
                }
                .item__img
                {
                }
                    .item__img
                    {
                        width: 100%;
                        height: 18.750rem; /* 300 */
                    }

                .item h2
                {
                    font-weight: 700;
                    font-size: 1.875rem; /* 30 */
                    margin-bottom: 0.625rem; /* 10 */
                }
                .item p
                {
                    line-height: 1.625rem; /* 26 */
                }

and the html for that is simple:

    <div class="container" role="main">

    <article class="item">
        <div class="item__info">
            <h2>Header1</h2>
            <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>
        </div>
        <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div>
    </article>
    <article class="item">
        <div class="item__info">
            <h2>Header2</h2>
            <p>Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2.</p>
        </div>
        <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div>
    </article>
    <article class="item">
        <div class="item__info">
            <h2>Header3</h2>
            <p>Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3</p>
        </div>
        <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div>
    </article>
    <article class="item">
        <div class="item__info">
            <h2>Header4</h2>
            <p>Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4.</p>
        </div>
        <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div>
    </article>



</div>

I created the jsfiddle for that, it's here. The effect that I wanted to achieve looks like this. What did go wrong here?

Upvotes: 0

Views: 1022

Answers (3)

Michael Queue
Michael Queue

Reputation: 1400

There are really much, much simpler ways to accomplish what you are trying to do. This is not responsive, but, should help you get going in the right direction.

For example:

HTML:

<div id="twoColumns">
    <h2>Text</h2>
    <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>

    <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
</div>

<div id="twoColumns">
    <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />

    <h2>Text</h2>
    <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>
</div>

CSS:

#twoColumns {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        /* column counts can be changed for num. of columns */
        column-count: 2;
    }
    <div id="twoColumns">
        <h2>Text</h2>
        <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>
        
        <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
    </div>
    
    <div id="twoColumns">
        <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
        
        <h2>Text</h2>
        <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>
    </div>

Fiddle: https://jsfiddle.net/mikeQ/mtn2obmj/

Also, check this link on MDN to learn about the CSS Columns property.

Upvotes: 1

w3debugger
w3debugger

Reputation: 2102

Please see the following. let me know if the issue is still there. :)

body {
  font-family: Open Sans, sans-serif;
  padding: 5rem 1.25rem;
  /* 80 20 */
}
* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  /* 80 */
}
.item {
  color: #666;
}
.item__info,
.item__img {
  width: 50%;
  float: left;
}
.item:nth-child(even) .item__info {
  float: right;
  padding-left: 1.25rem;
  /* 20 */
}
.item:nth-child(even) .item__img {
  padding-right: 1.25rem;
  /* 20 */
}
.item:nth-child(odd) .item__info {
  padding-right: 1.25rem;
  /* 20 */
}
.item:nth-child(odd) .item__img {
  padding-left: 1.25rem;
  /* 20 */
}
.item h2 {
  font-weight: 700;
  font-size: 1.875rem;
  /* 30 */
  margin-bottom: 0.625rem;
  /* 10 */
}
.item p {
  line-height: 1.625rem;
  /* 26 */
}
.item__img img {
  width: 100%;
  height: 18.750rem;
  /* 300 */
}
<div class="container" role="main">
  <article class="item">
    <div class="item__info">
      <h2>Header1</h2>

      <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p>
    </div>
    <div class="item__img">
      <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
    </div>
  </article>
  <article class="item">
    <div class="item__info">
      <h2>Header2</h2>

      <p>Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2.</p>
    </div>
    <div class="item__img">
      <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
    </div>
  </article>
  <article class="item">
    <div class="item__info">
      <h2>Header3</h2>

      <p>Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3</p>
    </div>
    <div class="item__img">
      <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
    </div>
  </article>
  <article class="item">
    <div class="item__info">
      <h2>Header4</h2>

      <p>Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4.</p>
    </div>
    <div class="item__img">
      <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" />
    </div>
  </article>
</div>

Upvotes: 2

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Your item__img is overwritten by this code:

 .item__img   {
    width: 100%;
    height: 18.750rem; /* 300 */
 }

It is 100% width insted of the 50% intended.

You should also lower the width to account for the padding and margin if you want it to line up properly it should look like this (note the width: 47%)

Upvotes: 0

Related Questions